<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>「学习笔记」CSS基础 | XC's Blog</title><meta name="keywords" content="前端笔记"><meta name="author" content="XC's Blog"><meta name="copyright" content="XC's Blog"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="「学习笔记」CSS基础CSS构造块「1. HTML的局限性」  HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。 操作html属性不方便 HTML里面添加样式带来的是无尽的臃肿和繁琐  「2. CSS网页的美容师」  让我们的网页更加丰富多彩，布局更加灵活自如。 CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，"><meta property="og:type" content="article"><meta property="og:title" content="「学习笔记」CSS基础"><meta property="og:url" content="https://www.webxc.ml/post/264246537/index.html"><meta property="og:site_name" content="XC&#39;s Blog"><meta property="og:description" content="「学习笔记」CSS基础CSS构造块「1. HTML的局限性」  HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。 操作html属性不方便 HTML里面添加样式带来的是无尽的臃肿和繁琐  「2. CSS网页的美容师」  让我们的网页更加丰富多彩，布局更加灵活自如。 CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://npm.elemecdn.com/webxc@1.0.0/cover/css1.jpg"><meta property="article:published_time" content="2022-01-02T18:00:00.000Z"><meta property="article:modified_time" content="2023-05-04T17:24:22.259Z"><meta property="article:author" content="XC&#39;s Blog"><meta property="article:tag" content="前端笔记"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://npm.elemecdn.com/webxc@1.0.0/cover/css1.jpg"><link rel="shortcut icon" href="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><link rel="canonical" href="https://www.webxc.ml/post/264246537/"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://npm.elemecdn.com/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/@fancyapps/ui/dist/fancybox.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:{path:"/search.xml",preload:!1,languages:{hits_empty:"找不到您查询的内容：${query}"}},translate:void 0,noticeOutdate:void 0,highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:!1},copy:{success:"吾辈宣布,你的剪切板已被占领",error:"呀~复制失败,请在尝试下",noSupport:"对不起,你的浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:60,languages:{author:"作者: XC's Blog",link:"链接: ",source:"来源: XC's Blog",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"您已切换为繁体",cht_to_chs:"您已切换为简体",day_to_night:"您已切换为深色主题",night_to_day:"您已切换为浅色主题",bgLight:"#3b70fc",bgDark:"#121212",position:"bottom-center"},source:{justifiedGallery:{js:"https://npm.elemecdn.com/flickr-justified-gallery/dist/fjGallery.min.js",css:"https://npm.elemecdn.com/flickr-justified-gallery/dist/fjGallery.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"「学习笔记」CSS基础",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2023-05-04 17:24:22"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const n=864e5*o,a={value:t,expiry:(new Date).getTime()+n};localStorage.setItem(e,JSON.stringify(a))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise(((t,o)=>{const n=document.createElement("script");n.src=e,n.async=!0,n.onerror=o,n.onload=n.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(n.onload=n.onreadystatechange=null,t())},document.head.appendChild(n)})),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme");"dark"===t?activateDarkMode():"light"===t&&activateLightMode();const o=saveToLocal.get("aside-status");void 0!==o&&("hide"===o?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="https://cdn1.tianli0.top/gh/web-xc/My-blog-CSS/mgi.css"><link rel="stylesheet" href="https://cdn1.tianli0.top/gh/web-xc/My-blog-CSS/mg111.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.16/css/mg2.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/styless.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/styles.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/font.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.15/css/font2.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiperstyle.css" media="print" onload='this.media="all"'><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">74</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">22</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">22</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-shouye"></i> <span>首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-shijian"></i> <span>时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian"></i> <span>标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw iconfont icon-fenlei"></i> <span>分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-lianxiwomen"></i> <span>友联</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-iconzhengli-"></i> <span>关于</span></a></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw iconfont icon-a-wangzhanchaojilianjiehulianwang"></i> <span>推荐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://www.inode.club/"><i class="fa-fw fa-sharp fa-solid fa-square-rss"></i> <span>程序员指南</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://ife.baidu.com/"><i class="fa-fw fa-brands fa-vuejs"></i> <span>前端技术学园</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yuque.com/tademanong/ag7q4n"><i class="fa-fw fa-solid fa-users"></i> <span>前端技术圈</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.code-nav.cn/"><i class="fa-fw fa-solid fa-shop"></i> <span>编程导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://q.shanyue.tech/"><i class="fa-fw fa-brands fa-square-js"></i> <span>每日一题</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://fanyouf.gitee.io/u1word/#/h5"><i class="fa-fw fa-solid fa-headphones"></i> <span>前端必会单词</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://site.51git.cn/render/gonav/4.html"><i class="fa-fw iconfont icon-wangzhandingzhi"></i> <span>网址导航</span></a></li><li><a class="site-page child" href="https://www.webxc.ml/music/"><i class="fa-fw iconfont icon-musical-note"></i> <span>音乐解锁</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url('https://npm.elemecdn.com/webxc@1.0.0/cover/css1.jpg')"><nav id="nav"><span id="blog_name"><div class="back-home-button" tabindex="-1"><i class="back-home-button-icon fas fa-grip-vertical"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">项目</div><div class="back-menu-list"><a class="back-menu-item" href="/" title="前往博客主页" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">主站</span></a><a class="back-menu-item" href="https://e.webxc.tk/" rel="external nofollow" title="前往学习笔记" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">学习笔记</span></a><a class="back-menu-item" href="https://v.webxc.tk/" rel="external nofollow" title="VuePress学习文档" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">VuePress文档</span></a><a class="back-menu-item" href="https://b.webxc.tk/" rel="external nofollow" title="旧站Hexo" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">旧站Hexo</span></a><a class="back-menu-item" href="https://gridea.webxc.ml/" rel="external nofollow" title="Gridea笔记" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Gridea笔记</span></a><a class="back-menu-item" href="https://c.webxc.tk/" rel="external nofollow" title="魔改Hexo" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">魔改Hexo</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">博客镜像</div><div class="back-menu-list"><a class="back-menu-item" href="https://blog.webxc.ml/" title="Vercel镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Vercel镜像</span></a><a class="back-menu-item" href="https://webxc.tk/" title="Netlify镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Netlify镜像</span></a><a class="back-menu-item" href="https://web-xc.gitee.io/" title="Gitee镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Gitee镜像</span></a><a class="back-menu-item" href="https://cf.webxc.ml/" title="Cloudflare镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Cloudflare镜像</span></a><a class="back-menu-item" href="https://render.webxc.ml/" title="Render镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Render镜像</span></a></div></div></div></div><a id="site-name" href="/"><div class="title">XC's Blog</div><i class="fa-solid fa-house"></i></a></span><div class="mask-name-container"><center id="name-container"><a id="page-name" href="javascript:btf.scrollToDest(0, 500)">PAGE_NAME</a></center></div><div id="menus"><div class="nav-button" id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i> <span>搜索</span></a></div><div class="nav-button" id="darkmode_navswitch"><a class="darkmode_switchbutton" type="button" title="浅色和深色模式转换" onclick="switchDarkMode()"><i class="fas fa-adjust"></i></a></div><div class="nav-button" id="nav-totop"><a class="totopbtn"><i class="fas fa-arrow-up"></i><span id="percent" onclick="btf.scrollToDest(0,500)">0</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-shouye"></i> <span>首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-shijian"></i> <span>时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian"></i> <span>标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw iconfont icon-fenlei"></i> <span>分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-lianxiwomen"></i> <span>友联</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-iconzhengli-"></i> <span>关于</span></a></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw iconfont icon-a-wangzhanchaojilianjiehulianwang"></i> <span>推荐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://www.inode.club/"><i class="fa-fw fa-sharp fa-solid fa-square-rss"></i> <span>程序员指南</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://ife.baidu.com/"><i class="fa-fw fa-brands fa-vuejs"></i> <span>前端技术学园</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yuque.com/tademanong/ag7q4n"><i class="fa-fw fa-solid fa-users"></i> <span>前端技术圈</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.code-nav.cn/"><i class="fa-fw fa-solid fa-shop"></i> <span>编程导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://q.shanyue.tech/"><i class="fa-fw fa-brands fa-square-js"></i> <span>每日一题</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://fanyouf.gitee.io/u1word/#/h5"><i class="fa-fw fa-solid fa-headphones"></i> <span>前端必会单词</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://site.51git.cn/render/gonav/4.html"><i class="fa-fw iconfont icon-wangzhandingzhi"></i> <span>网址导航</span></a></li><li><a class="site-page child" href="https://www.webxc.ml/music/"><i class="fa-fw iconfont icon-musical-note"></i> <span>音乐解锁</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">「学习笔记」CSS基础</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-01-02T18:00:00.000Z" title="发表于 2022-01-02 18:00:00">2022-01-02</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-05-04T17:24:22.259Z" title="更新于 2023-05-04 17:24:22">2023-05-04</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span data-flag-title="「学习笔记」CSS基础"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="twikoo_visitors"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="「学习笔记」CSS基础"><a href="#「学习笔记」CSS基础" class="headerlink" title="「学习笔记」CSS基础"></a>「学习笔记」CSS基础</h2><h2 id="CSS构造块"><a href="#CSS构造块" class="headerlink" title="CSS构造块"></a>CSS构造块</h2><p><strong>「1. HTML的局限性」</strong></p><ul><li>HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。</li><li>操作html属性不方便</li><li>HTML里面添加样式带来的是无尽的臃肿和繁琐</li></ul><p><strong>「2. CSS网页的美容师」</strong></p><ul><li>让我们的网页更加丰富多彩，布局更加灵活自如。</li><li>CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS</li></ul><p><strong>「3. CSS」</strong>CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。</p><ul><li><p><strong>作用</strong></p></li><li><ul><li>主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。</li><li>CSS以HTML为基础，提供了丰富的功能，如字体、样式、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。</li></ul></li></ul><p><strong>「4. CSS注释」</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/* 这是注释 */</span><br></pre></td></tr></table></figure><h3 id="引入CSS样式表"><a href="#引入CSS样式表" class="headerlink" title="引入CSS样式表"></a>引入CSS样式表</h3><p><strong>「1.行内式(内联样式)」</strong></p><p>通过标签的style属性来设置元素的样式</p><ul><li>style其实就是标签的属性</li><li>样式属性和值中间是:</li><li>多组属性值直接用;隔开</li><li>只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。</li><li>**缺点:**没有实现样式和结构相分离。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;标签名 style=&quot;属性1:属性值1; 属性2:属性值2; 属性3:属性值3;&quot;&gt; 内容 &lt;/标签名&gt;</span><br><span class="line">例如：</span><br><span class="line">&lt;div style=&quot;color: red; font-size: 12px;&quot;&gt;青春不常在，抓紧谈恋爱&lt;/div&gt;</span><br></pre></td></tr></table></figure><p><strong>「2.内部样式表(内嵌样式表)」</strong></p><p>也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。</p><ul><li>style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。</li><li>type&#x3D;”text&#x2F;css” 在html5中可以省略。</li><li>只能控制当前的页面</li><li>**缺点:**没有彻底分离结构与样式</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line">&lt;style type=&quot;text/CSS&quot;&gt;</span><br><span class="line">    选择器（选择的标签） &#123; </span><br><span class="line">      属性1: 属性值1;</span><br><span class="line">      属性2: 属性值2; </span><br><span class="line">      属性3: 属性值3;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br></pre></td></tr></table></figure><p><strong>「3.外部样式表(外链式)」</strong></p><p>也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。</p><ul><li><code>rel</code>:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。</li><li><code>href</code>:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt;</span><br></pre></td></tr></table></figure><p><strong>「4.团队约定-代码风格」</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">/*1.紧凑格式 (Compact)*/</span><br><span class="line">h3 &#123; color: deeppink;font-size: 20px;&#125;</span><br><span class="line">// 2.一种是展开格式（推荐）</span><br><span class="line">h3 &#123;</span><br><span class="line"> color: deeppink;</span><br><span class="line">    font-size: 20px;    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">/* 团队约定-代码大小写*/</span><br><span class="line">/* 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。*/</span><br><span class="line">/* 推荐 */</span><br><span class="line">h3&#123;</span><br><span class="line"> color: pink;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">/* 不推荐 */</span><br><span class="line">H3&#123;</span><br><span class="line"> COLOR: PINK;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><hr><h2 id="CSS基础选择器"><a href="#CSS基础选择器" class="headerlink" title="CSS基础选择器"></a>CSS基础选择器</h2><h4 id="CSS选择器作用"><a href="#CSS选择器作用" class="headerlink" title="CSS选择器作用"></a>CSS选择器作用</h4><p>找到指定的HTML页面元素，选择标签。</p><h3 id="CSS基础选择器-1"><a href="#CSS基础选择器-1" class="headerlink" title="CSS基础选择器"></a>CSS基础选择器</h3><p><strong>「1. 标签选择器」</strong></p><ul><li>标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。</li><li>作用：可以把某一类标签全部选择出来。</li><li>优点：快速为网页中同类型的标签统一样式</li><li>缺点：不能设计差异化样式。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">标签名&#123;属性1:属性值1; 属性2:属性值2; 属性3:属性值3; &#125; </span><br></pre></td></tr></table></figure><p><strong>「2. 类选择器」</strong></p><ul><li>类选择器使用”.”(英文点号)进行标识，后面紧跟类名。</li><li>语法：类名选择器</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.类名  &#123;   </span><br><span class="line">    属性1:属性值1; </span><br><span class="line">    属性2:属性值2; </span><br><span class="line">    属性3:属性值3;     </span><br><span class="line">&#125;</span><br><span class="line">&lt;p class=&#x27;类名&#x27;&gt;&lt;/p&gt;</span><br></pre></td></tr></table></figure><ul><li><p><code>优点</code>：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。</p></li><li><p><code>注意</code>：类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)</p></li><li><ul><li>长名称或词组可以使用中横线来为选择器命名。</li><li>不要纯数字、中文等命名， 尽量使用英文字母来表示。</li><li>多类名选择器：各个类名中间用空格隔开。</li></ul></li></ul><p><strong>「3. id选择器」</strong>id选择器使用<code>#</code>进行标识，后面紧跟id名</p><ul><li>元素的id值是唯一的，只能对应于文档中某一个具体的元素。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">#id名 &#123;属性1:属性值1; 属性2:属性值2; 属性3:属性值3; &#125;</span><br><span class="line">&lt;p id=&quot;id名&quot;&gt;&lt;/p&gt;</span><br></pre></td></tr></table></figure><p><strong>「4. 通配符选择器」</strong></p><p>通配符选择器用<code>*</code>号表示，<code>*</code> 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。</p><ul><li><code>注意</code>：会匹配页面所有的元素，降低页面响应速度，不建议随便使用</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">* &#123; 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; &#125;</span><br></pre></td></tr></table></figure><p>例如下面代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">  margin: 0;                    /* 定义外边距*/</span><br><span class="line">  padding: 0;                   /* 定义内边距*/</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>「5. 基础选择器总结」</strong></p><table><thead><tr><th align="left">选择器</th><th align="left">作用</th><th align="left">缺点</th><th align="left">使用情况</th><th align="left">用法</th></tr></thead><tbody><tr><td align="left">标签选择器</td><td align="left">可以选出所有相同的标签，比如p</td><td align="left">不能差异化选择</td><td align="left">较多</td><td align="left">p { color：red;}</td></tr><tr><td align="left">类选择器</td><td align="left">可以选出1个或者多个标签</td><td align="left">可以根据需求选择</td><td align="left">非常多</td><td align="left">.nav { color: red; }</td></tr><tr><td align="left">id选择器</td><td align="left">一次只能选择器1个标签</td><td align="left">只能使用一次</td><td align="left">不推荐使用</td><td align="left">#nav {color: red;}</td></tr><tr><td align="left">通配符选择器</td><td align="left">选择所有的标签</td><td align="left">选择的太多，有部分不需要</td><td align="left">不推荐使用</td><td align="left">* {color: red;}</td></tr></tbody></table><p><strong>「6. 团队约定-选择器」</strong></p><ol><li>尽量少用通配符选择器 <code>*</code>。</li><li>尽量少用ID选择器</li><li>不使用无具体语义定义的标签选择器。</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">/* 推荐 */</span><br><span class="line">.jdc &#123;&#125;</span><br><span class="line">li &#123;&#125;</span><br><span class="line">p&#123;&#125;</span><br><span class="line"></span><br><span class="line">/* 不推荐 */</span><br><span class="line">*&#123;&#125;</span><br><span class="line">#jdc &#123;&#125;</span><br><span class="line">div&#123;&#125;   因为div 没有语义，我们尽量少用</span><br></pre></td></tr></table></figure><h3 id="CSS复合选择器"><a href="#CSS复合选择器" class="headerlink" title="CSS复合选择器"></a>CSS复合选择器</h3><p>复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的</p><p><strong>「1. 后代选择器」</strong>又称为包含选择器</p><ul><li>用来选择元素或元素组的子孙后代</li><li>其写法就是把外层标签写在前面，内层标签写在后面，中间用<strong>「空格」</strong>分隔，先写父亲爷爷，再写儿子孙子。</li><li>子孙后代都可以这么选择。或者说，它能选择任何包含在内 的标签。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">父级 子级&#123;属性:属性值;属性:属性值;&#125;</span><br><span class="line"></span><br><span class="line">.class h3 &#123;color:red;font-size:16px;&#125;</span><br></pre></td></tr></table></figure><ul><li>当标签发生嵌套时，内层标签就成为外层标签的后代。</li><li>子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。</li></ul><p><strong>「2. 子元素选择器」</strong></p><ul><li>子元素选择器只能选择作为某元素子元素(亲儿子)的元素。</li><li>其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 <code>&gt;</code> 进行连接</li><li>这里的子,指的是亲儿子。不包含孙子 重孙子之类。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.class&gt;h3 &#123;color:red;font-size:14px;&#125;</span><br></pre></td></tr></table></figure><p><strong>「3. 交集选择器」</strong></p><ul><li>其中第一个为标签选择器，第二个为class选择器，两个选择器之间<code>不能有空格</code>，如h3.special。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">交集选择器是并且的意思,即...又...的意思</span><br><span class="line">比如：   p.one   选择的是： 类名为 .one 的段落标签。 </span><br><span class="line">/*用的相对来说比较少，不建议使用。*/</span><br></pre></td></tr></table></figure><p><strong>「4. 并集选择器」</strong>如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过<code>,</code>连接而成的，通常用于集体声明。</p><ul><li>任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分。</li><li>并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">比如  </span><br><span class="line">.one, </span><br><span class="line">p , </span><br><span class="line">#test &#123;color: #F00;&#125;  </span><br><span class="line">表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 </span><br><span class="line">通常用于集体声明。  </span><br></pre></td></tr></table></figure><p><strong>「5. 链接伪类选择器」</strong></p><p>用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。</p><p>链接伪类，是利用交集选择器.</p><ul><li><code>a:link</code> 未访问的链接</li><li><code>a:visited</code> 已访问的链接</li><li><code>a:hover</code> 鼠标移动到链接上</li><li><code>a:active</code> 选定的链接</li></ul><h5 id="实际工作中，很少写全四个状态，一般写法如下："><a href="#实际工作中，很少写全四个状态，一般写法如下：" class="headerlink" title="实际工作中，很少写全四个状态，一般写法如下："></a>实际工作中，很少写全四个状态，一般写法如下：</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">a &#123;   /* a是标签选择器  所有的链接 */</span><br><span class="line">   font-weight: 700;</span><br><span class="line">   font-size: 16px;</span><br><span class="line">   color: gray;</span><br><span class="line">      text-decoration: none; /* 清除链接默认的下划线*/</span><br><span class="line">&#125;</span><br><span class="line">a:hover &#123;   /* :hover 是链接伪类选择器 鼠标经过 */</span><br><span class="line">   color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>「6. 复合选择器总结」</strong></p><table><thead><tr><th align="left">选择器</th><th align="left">作用</th><th align="left">特征</th><th align="left">使用情况</th><th align="left">隔开符号及用法</th></tr></thead><tbody><tr><td align="left">后代选择器</td><td align="left">用来选择元素后代</td><td align="left">是选择所有的子孙后代</td><td align="left">较多</td><td align="left">符号是<code>空格</code> .nav a</td></tr><tr><td align="left">子代选择器</td><td align="left">选择 最近一级元素</td><td align="left">只选亲儿子</td><td align="left">较少</td><td align="left">符号是<code>&gt;</code> .nav&gt;p</td></tr><tr><td align="left">交集选择器</td><td align="left">选择两个标签交集的部分</td><td align="left">既是 又是</td><td align="left">较少</td><td align="left"><code>没有符号</code> p.one</td></tr><tr><td align="left">并集选择器</td><td align="left">选择某些相同样式的选择器</td><td align="left">可以用于集体声明</td><td align="left">较多</td><td align="left">符号是<code>逗号</code> .nav, .header</td></tr><tr><td align="left">链接伪类选择器</td><td align="left">给链接更改状态</td><td align="left"></td><td align="left">较多</td><td align="left">重点记住 a{} 和 a:hover 实际开发的写法</td></tr></tbody></table><hr><h2 id="CSS字体样式"><a href="#CSS字体样式" class="headerlink" title="CSS字体样式"></a>CSS字体样式</h2><h3 id="font字体"><a href="#font字体" class="headerlink" title="font字体"></a>font字体</h3><p><strong>「1. font-size」</strong></p><ul><li>font-size属性用于设置字号(字体大小)</li><li><code>谷歌浏览器</code>默认的文字大小为16px</li><li>不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p &#123; font-size:20px; &#125;</span><br></pre></td></tr></table></figure><h4 id="单位"><a href="#单位" class="headerlink" title="单位"></a>单位</h4><ul><li>相对长度单位、绝对长度单位</li></ul><p><img src="" data-lazy-src="" alt="图片"><strong>「2. font-family」</strong></p><ul><li>font-family属性用于设置哪一种字体。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p &#123; font-family:&quot;微软雅黑&quot;;&#125;</span><br></pre></td></tr></table></figure><ul><li>指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p &#123;font-family: Arial,&quot;Microsoft Yahei&quot;, &quot;微软雅黑&quot;;&#125;</span><br></pre></td></tr></table></figure><ul><li><p>CSS Unicode字体</p></li><li><ul><li>在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。</li><li>xp 系统不支持 类似微软雅黑的中文。</li><li>解决方案：英文来替代。比如<code>font-family:&quot;Microsoft Yahei&quot;</code>。在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。</li></ul></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">font-family: &quot;\5FAE\8F6F\96C5\9ED1&quot;;   表示设置字体为“微软雅黑”。</span><br></pre></td></tr></table></figure><p><strong>「3. font-weight」</strong></p><table><thead><tr><th align="left">属性值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">normal</td><td align="left">默认值（不加粗的）</td></tr><tr><td align="left">bold</td><td align="left">定义粗体（加粗的）</td></tr><tr><td align="left">100~900</td><td align="left">400 等同于 normal，而 700 等同于 bold (数字表示粗细用的多)</td></tr></tbody></table><p><strong>「4. font-weight」</strong></p><p>font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：</p><table><thead><tr><th align="left">属性</th><th align="left">作用</th></tr></thead><tbody><tr><td align="left">normal</td><td align="left">默认值，浏览器会显示标准的字体样式 font-style: normal;</td></tr><tr><td align="left">italic</td><td align="left">浏览器会显示斜体的字体样式。</td></tr></tbody></table><p><strong>「5. font:综合设置字体样式」</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 &#123; font: font-style  font-weight  font-size/line-height  font-family;&#125;</span><br></pre></td></tr></table></figure><ul><li><p>注意：使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以<code>空格</code>隔开</p></li><li><ul><li>其中不需要设置的属性可以省略(取默认值),但必须保留<code>font-size</code>和<code>font-family</code>属性，否则font属性将不起作用。</li></ul></li></ul><p><strong>「6. font总结」</strong></p><table><thead><tr><th align="left">属性</th><th align="left">表示</th><th align="left">注意点</th></tr></thead><tbody><tr><td align="left">font-size</td><td align="left">字号</td><td align="left">我们通常用的单位是px 像素，一定要跟上单位</td></tr><tr><td align="left">font-family</td><td align="left">字体</td><td align="left">实际工作中按照团队约定来写字体</td></tr><tr><td align="left">font-weight</td><td align="left">字体粗细</td><td align="left">记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位</td></tr><tr><td align="left">font-style</td><td align="left">字体样式</td><td align="left">记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal</td></tr><tr><td align="left">font</td><td align="left">字体连写</td><td align="left">1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现</td></tr></tbody></table><h3 id="CSS外观属性"><a href="#CSS外观属性" class="headerlink" title="CSS外观属性"></a>CSS外观属性</h3><p><strong>「1. color」</strong></p><p>color属性用于定义文本的颜色<br>其取值方式有以下3种：</p><ul><li>实际工作中，用16进制的写法是最多的，且我们更喜欢简写方式比如#f0代表红色。</li></ul><table><thead><tr><th align="left">表示表示</th><th align="left">属性值</th></tr></thead><tbody><tr><td align="left">预定义的颜色值</td><td align="left">red，green，blue，pink</td></tr><tr><td align="left">十六进制</td><td align="left">#FF0000，#FF6600，#29D794</td></tr><tr><td align="left">RGB代码</td><td align="left">rgb(255,0,0)或rgb(100%,0%,0%)</td></tr></tbody></table><p><strong>「2.text-align」</strong></p><p>text-align属性用于设置文本内容的水平对齐方式，相当于html中的align对齐属性。</p><ul><li>注意：是让盒子里面的文本内容水平居中， 而不是让盒子居中对齐</li></ul><p>其可用属性值如下：</p><table><thead><tr><th align="left">属性</th><th align="center">解释</th></tr></thead><tbody><tr><td align="left">left</td><td align="center">左对齐（默认值）</td></tr><tr><td align="left">right</td><td align="center">右对齐</td></tr><tr><td align="left">center</td><td align="center">居中对齐</td></tr></tbody></table><p><strong>「3. line-height」</strong>line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。</p><ul><li>line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">一般情况下，行距比字号大7--8像素左右就可以了。</span><br><span class="line">line-height: 24px;</span><br></pre></td></tr></table></figure><h4 id="行高测量"><a href="#行高测量" class="headerlink" title="行高测量"></a>行高测量</h4><p>行高测量方法：<img src="" data-lazy-src="" alt="图片"></p><p><img src="" data-lazy-src="" alt="图片"><code>行高测量方法</code>行高我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。</p><blockquote><p><strong>文字的行高等于盒子的高度。</strong>行高 &#x3D; 上距离 + 内容高度 + 下距离<br>上距离和下距离总是相等的，因此文字看上去是垂直居中的。</p></blockquote><h4 id="行高与高度的三种关系"><a href="#行高与高度的三种关系" class="headerlink" title="行高与高度的三种关系"></a>行高与高度的三种关系</h4><ul><li>如果 行高 等 高度 文字会 垂直居中</li><li>如果行高 大于 高度 文字会 偏下</li><li>如果行高小于高度 文字会 偏上</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">/*line-height 要设置在font属性下面，否则无效，例如：*/</span><br><span class="line">height: 80px;</span><br><span class="line">text-align: center;</span><br><span class="line">font: normal bold 30px &quot;宋体&quot;;</span><br><span class="line">line-height: 80px;</span><br></pre></td></tr></table></figure><p>可以使用display:flex;布局方式让文字水平垂直居中</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">display: flex;</span><br><span class="line">align-items: center;     /* 侧轴对齐方式*/</span><br><span class="line">justify-content: center; /* 主轴对齐方式 */</span><br></pre></td></tr></table></figure><p><strong>「4. text-indent」</strong></p><p>text-indent属性用于设置首行文本的缩进</p><ul><li>其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。</li><li>建议使用em作为设置单位。</li><li>1em 就是一个字的宽度。如果是汉字的段落，1em 就是一个汉字的宽度</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">p &#123;</span><br><span class="line">      /*行间距*/</span><br><span class="line">      line-height: 25px;</span><br><span class="line">      /*首行缩进2个字  em  1个em 就是1个字的大小*/</span><br><span class="line">      text-indent: 2em;  </span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure><p><strong>「5. text-decoration」</strong>文本的装饰</p><p>text-decoration,通常我们用于给链接修改装饰效果</p><table><thead><tr><th align="left">值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">none</td><td align="left">默认。定义标准的文本。取消下划线（最常用）</td></tr><tr><td align="left">underline</td><td align="left">定义文本下的一条线。下划线 也是我们链接自带的（常用）</td></tr><tr><td align="left">overline</td><td align="left">定义文本上的一条线。（不用）</td></tr><tr><td align="left">line-through</td><td align="left">定义穿过文本下的一条线。（不常用）</td></tr></tbody></table><p><strong>「6. CSS外观属性总结」</strong></p><table><thead><tr><th align="left">属性</th><th align="left">表示</th><th align="left">注意点</th></tr></thead><tbody><tr><td align="left">color</td><td align="left">颜色</td><td align="left">我们通常用 十六进制 比如 而且是简写形式 #fff</td></tr><tr><td align="left">line-height</td><td align="left">行高</td><td align="left">控制行与行之间的距离</td></tr><tr><td align="left">text-align</td><td align="left">水平对齐</td><td align="left">可以设定文字水平的对齐方式</td></tr><tr><td align="left">text-indent</td><td align="left">首行缩进</td><td align="left">通常我们用于段落首行缩进2个字的距离 text-indent: 2em;</td></tr><tr><td align="left">text-decoration</td><td align="left">文本修饰</td><td align="left">记住 添加 下划线 underline 取消下划线 none</td></tr></tbody></table><hr><h2 id="标签显示模式-display"><a href="#标签显示模式-display" class="headerlink" title="标签显示模式(display)"></a>标签显示模式(display)</h2><p><code>标签显示模式</code>是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。</p><h4 id="标签显示模式转换-display"><a href="#标签显示模式转换-display" class="headerlink" title="标签显示模式转换 display"></a>标签显示模式转换 display</h4><ul><li>块转行内：display:inline;</li><li>行内转块：display:block;</li><li>块、行内元素转换为行内块：display: inline-block;</li></ul><p><strong>「1. 块级元素(block-level)」</strong></p><blockquote><p>常见的块元素有</p><h1>~<h6>、<p>、</p><div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。<p></p></div></li></ol></ul></div></h6></h1></blockquote><ul><li><h5 id="块级元素的特点"><a href="#块级元素的特点" class="headerlink" title="块级元素的特点"></a>块级元素的特点</h5></li><li><ul><li>独占一行</li><li>高度，宽度，外边距以及内边距都可以控制。</li><li>宽度默认是容器(父级宽度)的100%</li><li>是一个容器及盒子，里面可以放行内或者块级元素</li><li><strong>注意</strong>：只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div。同理，还有h1~h6，dt,它们都是文字类块级标签，里面不能放其他块级元素。</li></ul></li></ul><p><strong>「2. 行内元素(inline-level)」</strong></p><blockquote><p>有的地方也称为<code>内联元素</code></p><p>常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。</span></span></u></ins></s></del></i></em></b></strong></a></p></blockquote><ul><li><h5 id="行内元素的特点"><a href="#行内元素的特点" class="headerlink" title="行内元素的特点"></a>行内元素的特点</h5></li><li><ol><li>相邻行内元素在一行上，一行可以显示多个。</li><li>高度、宽度直接设置是无效的。</li><li>默认高度就是它本身内容的宽度。</li><li>行内元素只能容纳文本或其他行内元素。</li></ol></li></ul><h6 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h6><ul><li>链接里面不能再放链接</li><li>特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。</li></ul><p><strong>「3. 行内块元素(inline-block)」</strong></p><blockquote><p>在行内元素中有几个特殊的标签——<img>、<input>、</p><td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。<p></p></td></blockquote><ul><li><p><strong>行内块元素的特点</strong></p></li><li><ol><li>和相邻行内元素(行内块)在一行上，但是之间会有空白风险。一行可以显示多个</li><li>默认宽度就是它本身内容的宽度。</li><li>高度，行高，外边距以及内边距都可以控制。</li></ol></li></ul><h4 id="三种模式总结"><a href="#三种模式总结" class="headerlink" title="三种模式总结"></a>三种模式总结</h4><table><thead><tr><th align="left">元素模式</th><th align="left">元素排列</th><th align="left">设置样式</th><th align="left">默认宽度</th><th align="left">包含</th></tr></thead><tbody><tr><td align="left">块级元素</td><td align="left">一行只能放一个块级元素</td><td align="left">可以设置宽度高度</td><td align="left">容器的100%</td><td align="left">容器级可以包含任何标签</td></tr><tr><td align="left">行内元素</td><td align="left">一行可以放多个行内元素</td><td align="left">不可以直接设置宽度高度</td><td align="left">它本身内容的宽度</td><td align="left">容纳文本或则其他行内元素</td></tr><tr><td align="left">行内块元素</td><td align="left">一行放多个行内块元素</td><td align="left">可以设置宽度和高度</td><td align="left">它本身内容的宽度</td><td align="left"></td></tr></tbody></table><hr><h2 id="CSS背景-background"><a href="#CSS背景-background" class="headerlink" title="CSS背景(background)"></a>CSS背景(background)</h2><p><strong>「1. 背景颜色」</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background-color: 颜色值;   默认的值是 transparent  透明的</span><br></pre></td></tr></table></figure><p><strong>「2. 背景图片(image)」</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">语法：</span><br><span class="line">background-image : none | url (url) ;</span><br><span class="line">例如:</span><br><span class="line">background-image: url(images/1.png);</span><br></pre></td></tr></table></figure><p><strong>「3. 背景平铺（repeat）」</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background-repeat : repeat | no-repeat | repeat-x | repeat-y </span><br></pre></td></tr></table></figure><table><thead><tr><th align="left">参数</th><th align="center">作用</th></tr></thead><tbody><tr><td align="left">repeat</td><td align="center">背景图像在纵向和横向上平铺（默认的）</td></tr><tr><td align="left">no-repeat</td><td align="center">背景图像不平铺</td></tr><tr><td align="left">repeat-x</td><td align="center">背景图像在横向上平铺</td></tr><tr><td align="left">repeat-y</td><td align="center">背景图像在纵向平铺</td></tr></tbody></table><p><strong>「4. 背景位置(position)」</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">background-position : length || length</span><br><span class="line">background-position : position || position </span><br></pre></td></tr></table></figure><table><thead><tr><th align="left">参数</th><th align="center">值</th></tr></thead><tbody><tr><td align="left">length</td><td align="center">百分数 | 由浮点数字和单位标识符组成的长度值</td></tr><tr><td align="left">position</td><td align="center">top | center | bottom | left | center | right 方位名词</td></tr></tbody></table><h4 id="注意："><a href="#注意：" class="headerlink" title="注意："></a>注意：</h4><ul><li>必须先指定background-image属性</li><li>position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。</li><li>如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致</li><li>如果只指定了一个方位名词，另一个值默认居中对齐。</li><li>如果position 后面是精确坐标， 那么第一个，肯定是 x 第二个一定是y</li><li>如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中</li><li>如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标</li></ul><h4 id="背景简写："><a href="#背景简写：" class="headerlink" title="背景简写："></a>背景简写：</h4><ul><li>background：属性的值的书写顺序官方没有强制的标准。为了可读性，建议如下写：</li><li>background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/* 有背景图片背景颜色可以不用写*/</span><br><span class="line">background: transparent url(image.jpg) repeat-y  scroll center top ;</span><br></pre></td></tr></table></figure><p><strong>「5. 背景半透明(CSS3)」</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">background: rgba(0, 0, 0, 0.3);</span><br><span class="line">background: rgba(0, 0, 0, .3);</span><br></pre></td></tr></table></figure><ul><li>等同于background-color: rgba(0, 0, 0, .3)</li><li>最后一个参数是alpha 透明度 取值范围 0~1之间</li><li>我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);</li><li>注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响</li><li>低于IE 9的版本不支持</li></ul><h5 id="盒子半透明-opacity"><a href="#盒子半透明-opacity" class="headerlink" title="盒子半透明 opacity"></a>盒子半透明 opacity</h5><ul><li>设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">opacity: .2;</span><br></pre></td></tr></table></figure><p><strong>「6. 背景总结」</strong></p><table><thead><tr><th align="left">属性</th><th align="left">作用</th><th align="left">值</th></tr></thead><tbody><tr><td align="left">background-color</td><td align="left">背景颜色</td><td align="left">预定义的颜色值&#x2F;十六进制&#x2F;RGB代码</td></tr><tr><td align="left">background-image</td><td align="left">背景图片</td><td align="left">url(图片路径)</td></tr><tr><td align="left">background-repeat</td><td align="left">是否平铺</td><td align="left">repeat&#x2F;no-repeat&#x2F;repeat-x&#x2F;repeat-y</td></tr><tr><td align="left">background-position</td><td align="left">背景位置</td><td align="left">length&#x2F;position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法</td></tr><tr><td align="left">background-attachment</td><td align="left">背景固定还是滚动</td><td align="left">scroll&#x2F;fixed</td></tr><tr><td align="left">背景简写</td><td align="left">更简单</td><td align="left">背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序</td></tr><tr><td align="left">背景透明</td><td align="left">让盒子半透明</td><td align="left">background: rgba(0,0,0,0.3); 后面必须是 4个值</td></tr></tbody></table><hr><h2 id="CSS三大特性"><a href="#CSS三大特性" class="headerlink" title="CSS三大特性"></a>CSS三大特性</h2><p><strong>「1. CSS 层叠性」</strong></p><p><img src="" data-lazy-src="" alt="图片"></p><p>-<code>概念</code>：</p><ul><li>所谓层叠性是指多种CSS样式的叠加</li><li>是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉</li></ul><p>-<code>原则</code>：</p><ul><li>样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。</li><li>样式不冲突，不会层叠。</li></ul><p><strong>「2. CSS 继承性」</strong></p><p><img src="" data-lazy-src="" alt="图片">-<code>概念</code>：</p><ul><li>子标签会继承父标签的某些样式，如文本颜色和字号。</li><li>想要设置一个可继承的属性，只需将它应用于父元素即可。</li></ul><p>-<code>注意</code>：</p><ul><li>恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。</li><li>子元素可以继承父元素的样式（<strong>text-，font-，line-这些元素开头的可以继承，以及color属性</strong>）</li></ul><p><strong>「3. CSS 优先级(CSS特殊性)」</strong></p><p><img src="" data-lazy-src="" alt="图片">-<code>概念</code>：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，</p><ul><li>选择器相同，则执行层叠性</li><li>选择器不同，就会出现优先级的问题。</li></ul><p>-<code>权重计算公式</code>：</p><table><thead><tr><th align="left">标签选择器</th><th align="left">计算权重公式</th></tr></thead><tbody><tr><td align="left">继承或者 *</td><td align="left">0,0,0,0</td></tr><tr><td align="left">每个元素（标签选择器）</td><td align="left">0,0,0,1</td></tr><tr><td align="left">每个类，伪类</td><td align="left">0,0,1,0</td></tr><tr><td align="left">每个ID</td><td align="left">0,1,0,0</td></tr><tr><td align="left">每个行内样式 style&#x3D;””</td><td align="left">1,0,0,0</td></tr><tr><td align="left">每个!important 最重要的</td><td align="left">∞ 无穷大</td></tr></tbody></table><ul><li>值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。</li><li>关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）</li><li>div { color: pink !important; }</li></ul><p>-<code>权重叠加</code>：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">div ul  li   ------&gt;      0,0,0,3</span><br><span class="line">.nav ul li   ------&gt;      0,0,1,2</span><br><span class="line">a:hover      -----—&gt;      0,0,1,1</span><br><span class="line">.nav a       ------&gt;      0,0,1,1</span><br></pre></td></tr></table></figure><p>-<code>继承的权重是0</code>：</p><ul><li>我们修改样式，一定要看该标签有没有被选中</li><li>如果选中了，那么以上面的公式来计权重。谁大听谁的。</li><li>如果没有选中，那么权重是0，因为继承的权重为0.</li></ul><hr><h2 id="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h2><p>css学习三大重点： css 盒子模型 、 浮动 、 定位</p><p><strong>网页布局的本质</strong></p><ul><li>首先利用CSS设置好盒子的大小，然后摆放盒子的位置。</li><li>最后把网页元素比如文字图片等等，放入盒子里面。</li></ul><h3 id="1-盒子模型-Box-Model"><a href="#1-盒子模型-Box-Model" class="headerlink" title="1. 盒子模型(Box Model)"></a>1. 盒子模型(Box Model)</h3><ul><li>盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。</li><li>盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。</li><li>盒子里面的文字和图片等元素是 内容区域</li><li>盒子的厚度 我们称为为盒子的边框</li><li>盒子内容与边框的距离是内边距</li><li>盒子与盒子之间的距离是外边距</li></ul><p><strong>W3c标准盒子模型</strong></p><p>标准 w3c 盒子模型的范围包括 margin、border、padding、content</p><p>当设置为box-sizing: content-box;时，将采用标准模式解析计算，也是默认模式；</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">内盒尺寸计算(元素实际大小)</span><br></pre></td></tr></table></figure><ul><li>宽度：Element Height &#x3D; content height + padding + border （Height为内容高度）</li><li>高度：Element Width &#x3D; content width + padding + border （Width为内容宽度）</li><li>盒子的实际大小：<strong>内容的宽度和高度 + 内边距 + 边框</strong> <img src="" data-lazy-src="" alt="图片"><strong>IE盒子模型</strong></li></ul><p>IE 盒子模型的 content 部分包含了 border 和 pading</p><p>当设置为box-sizing: border-box时，将采用怪异模式解析计算；</p><h3 id="2-盒子边框-border"><a href="#2-盒子边框-border" class="headerlink" title="2. 盒子边框(border)"></a>2. 盒子边框(border)</h3><table><thead><tr><th align="left">属性</th><th align="center">作用</th></tr></thead><tbody><tr><td align="left">border-width</td><td align="center">定义边框粗细，单位是px</td></tr><tr><td align="left">border-style</td><td align="center">边框的样式</td></tr><tr><td align="left">border-color</td><td align="center">边框颜色</td></tr></tbody></table><p><strong>边框的样式：</strong></p><ul><li>none：没有边框即忽略所有边框的宽度（默认值）</li><li>solid：边框为单实线(最为常用的)</li><li>dashed：边框为虚线</li><li>dotted：边框为点线</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">边框综合设置</span><br><span class="line">border : border-width || border-style || border-color </span><br><span class="line"></span><br><span class="line">border: 1px solid red;  没有顺序要求  </span><br></pre></td></tr></table></figure><p><strong>盒子边框写法总结表：</strong></p><p>很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。</p><table><thead><tr><th align="left">上边框</th><th align="left">下边框</th><th align="left">左边框</th><th align="left">右边框</th></tr></thead><tbody><tr><td align="left">border-top-style:样式;</td><td align="left">border-bottom-style:样式;</td><td align="left">border-left-style:样式;</td><td align="left">border-right-style:样式;</td></tr><tr><td align="left">border-top-width:宽度;</td><td align="left">border- bottom-width:宽度;</td><td align="left">border-left-width:宽度;</td><td align="left">border-right-width:宽度;</td></tr><tr><td align="left">border-top-color:颜色;</td><td align="left">border- bottom-color:颜色;</td><td align="left">border-left-color:颜色;</td><td align="left">border-right-color:颜色;</td></tr><tr><td align="left">border-top:宽度 样式 颜色;</td><td align="left">border-bottom:宽度 样式 颜色;</td><td align="left">border-left:宽度 样式 颜色;</td><td align="left">border-right:宽度 样式 颜色;</td></tr></tbody></table><p><strong>表格的细线边框：</strong></p><p><img src="" data-lazy-src="" alt="图片"></p><ul><li><p>通过表格的<code>cellspacing=&quot;0&quot;</code>,将单元格与单元格之间的距离设置为0，</p></li><li><p>但是两个单元格之间的边框会出现重叠，从而使边框变粗</p></li><li><p>通过css属性：table{ border-collapse:collapse; }</p></li><li><ul><li><code>collapse</code> 单词是合并的意思,<code>border-collapse: collapse;</code>表示相邻边框合并在一起。</li></ul></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line"> table &#123;</span><br><span class="line">  width: 500px;</span><br><span class="line">  height: 300px;</span><br><span class="line">  border: 1px solid red;</span><br><span class="line"> &#125;</span><br><span class="line"> td &#123;</span><br><span class="line">  border: 1px solid red;</span><br><span class="line">  text-align: center;</span><br><span class="line"> &#125;</span><br><span class="line"> table, td &#123;</span><br><span class="line">  border-collapse: collapse;  /*合并相邻边框*/</span><br><span class="line"> &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><h3 id="2-内边距-padding"><a href="#2-内边距-padding" class="headerlink" title="2. 内边距(padding)"></a>2. 内边距(padding)</h3><p>padding属性用于设置内边距。是指边框与内容之间的距离。</p><p><strong>设置</strong></p><table><thead><tr><th align="left">属性</th><th align="left">作用</th></tr></thead><tbody><tr><td align="left">padding-left</td><td align="left">左内边距</td></tr><tr><td align="left">padding-right</td><td align="left">右内边距</td></tr><tr><td align="left">padding-top</td><td align="left">上内边距</td></tr><tr><td align="left">padding-bottom</td><td align="left">下内边距</td></tr></tbody></table><p><strong>padding简写</strong></p><table><thead><tr><th align="left">值的个数</th><th align="left">表达意思</th></tr></thead><tbody><tr><td align="left">1个值</td><td align="left">padding：上下左右内边距;</td></tr><tr><td align="left">2个值</td><td align="left">padding: 上下内边距 左右内边距 ；</td></tr><tr><td align="left">3个值</td><td align="left">padding：上内边距 左右内边距 下内边距；</td></tr><tr><td align="left">4个值</td><td align="left">padding: 上内边距 右内边距 下内边距 左内边距 ；</td></tr></tbody></table><p>当我们给盒子指定padding值之后， 发生了2件事情：</p><ol><li>内容和边框 有了距离，添加了内边距。</li><li>盒子会变大</li></ol><p><strong>解决措施：</strong>通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。</p><p><strong>padding不影响盒子大小情况：👉</strong>如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。</p><h3 id="3-外边距（margin）"><a href="#3-外边距（margin）" class="headerlink" title="3. 外边距（margin）"></a>3. 外边距（margin）</h3><p>margin属性用于设置外边距。margin就是控制<code>盒子和盒子之间的距离</code></p><p><strong>设置</strong></p><table><thead><tr><th align="left">属性</th><th align="left">作用</th></tr></thead><tbody><tr><td align="left">margin-left</td><td align="left">左外边距</td></tr><tr><td align="left">margin-right</td><td align="left">右外边距</td></tr><tr><td align="left">margin-top</td><td align="left">上外边距</td></tr><tr><td align="left">margin-bottom</td><td align="left">下外边距</td></tr></tbody></table><p>margin值的简写 （复合写法）代表意思 跟 padding 完全相同。</p><p><strong>块级盒子水平居中</strong></p><ul><li>盒子必须指定宽度（width）</li><li>然后就给左右的外边距都设置为auto</li></ul><p>实际工作中常用这种方式进行网页布局，示例代码如下：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.header  &#123; width: 960px; margin: 0 auto;&#125;</span><br></pre></td></tr></table></figure><p>常见的写法，以下下三种都可以👇👇。</p><ul><li>margin-left: auto; margin-right: auto;</li><li>margin: auto;</li><li>margin: 0 auto;</li></ul><p><strong>文字居中和盒子居中区别👇👇</strong></p><ol><li>盒子内的文字水平居中是 text-align: center; 而且还可以让 行内元素和行内块居中对齐</li><li>块级盒子水平居中 左右margin 改为 auto</li></ol><p><strong>插入图片和背景图片区别👇👇</strong></p><ol><li><code>插入图片</code>我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin</li><li><code>背景图片</code>我们一般用于小图标背景或者超大背景图片、背景图片，移动位置只能通过 background-position</li></ol><p><strong>清除元素的默认内外边距👇👇</strong></p><ul><li>行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">   padding:0;         /* 清除内边距 */</span><br><span class="line">   margin:0;          /* 清除外边距 */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="4-外边距合并"><a href="#4-外边距合并" class="headerlink" title="4.外边距合并"></a>4.外边距合并</h3><p>使用margin定义块元素的<strong>「垂直外边距」</strong>时，可能会出现外边距的合并。</p><h6 id="1-相邻块元素垂直外边距的合并"><a href="#1-相邻块元素垂直外边距的合并" class="headerlink" title="(1). 相邻块元素垂直外边距的合并"></a>(1). 相邻块元素垂直外边距的合并</h6><ul><li>当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom</li><li>下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和</li><li><strong>「取两个值中的较大者」</strong>这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。</li></ul><p><img src="" data-lazy-src="" alt="图片"><strong>「解决方案：尽量给只给一个盒子添加margin值」</strong>。</p><h4 id="2-嵌套块元素垂直外边距的合并（塌陷）"><a href="#2-嵌套块元素垂直外边距的合并（塌陷）" class="headerlink" title="(2). 嵌套块元素垂直外边距的合并（塌陷）"></a>(2). 嵌套块元素垂直外边距的合并（塌陷）</h4><ul><li>对于两个嵌套关系的块元素，如果父元素没有上内边距及边框</li><li>父元素的上外边距会与子元素的上外边距发生合并</li><li>合并后的外边距为两者中的较大者</li></ul><p><img src="" data-lazy-src="" alt="图片"><strong>「解决方案：」</strong></p><ol><li>可以为父元素定义上边框。</li><li>可以为父元素定义上内边距</li><li>可以为父元素添加overflow: hidden。</li></ol><p>还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。</p><h4 id="盒子模型布局稳定性"><a href="#盒子模型布局稳定性" class="headerlink" title="盒子模型布局稳定性"></a>盒子模型布局稳定性</h4><p>优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">width &gt;  padding  &gt;   margin   </span><br></pre></td></tr></table></figure><p><strong>原因：</strong></p><ul><li>margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。</li><li>padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。</li><li>width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。</li></ul><h3 id="5-CSS3-新增"><a href="#5-CSS3-新增" class="headerlink" title="5. CSS3 新增"></a>5. CSS3 新增</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">圆角边框：</span><br><span class="line">border-radius:length;</span><br><span class="line"></span><br><span class="line">border-top-left-radius   定义了左上角的弧度</span><br><span class="line">border-top-right-radius   定义了右上角的弧度</span><br><span class="line">border-bottom-right-radius   定义了右下角的弧度</span><br><span class="line">border-bottom-left-radius   定义了左下角的弧度</span><br></pre></td></tr></table></figure><ul><li>其中每一个值可以为 数值或百分比的形式。</li><li>技巧：让一个正方形 变成圆圈</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border-radius: 50%;</span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="" alt="图片">如果要在四个角上一一指定，可以使用以下规则👇👇：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border-radius: 左上角 右上角  右下角  左下角;</span><br></pre></td></tr></table></figure><ol><li>四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。</li><li>三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角</li><li>两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角</li><li>一个值：四个圆角值相同</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">盒子阴影(box-shadow)：</span><br><span class="line">box-shadow: offset-x offset-y [blur [spread]] [color] [inset]</span><br></pre></td></tr></table></figure><table><thead><tr><th align="left">值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">offset-x</td><td align="left">阴影的水平偏移量。正数向右偏移，负数向左偏移。</td></tr><tr><td align="left">offset-y</td><td align="left">阴影的垂直偏移量。正数向下偏移，负数向上偏移。</td></tr><tr><td align="left">blur</td><td align="left">可选。阴影模糊距离，不能取负数。</td></tr><tr><td align="left">spread</td><td align="left">可选。阴影大小</td></tr><tr><td align="left">color</td><td align="left">可选。阴影的颜色</td></tr><tr><td align="left">inset</td><td align="left">可选。表示添加内阴影，默认为外阴影</td></tr></tbody></table><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">div &#123;</span><br><span class="line">   width: 200px;</span><br><span class="line">   height: 200px;</span><br><span class="line">   border: 10px solid red;</span><br><span class="line">   /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */</span><br><span class="line">   /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */</span><br><span class="line">   box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);   </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><hr><h2 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h2><h3 id="浮动-1"><a href="#浮动-1" class="headerlink" title="浮动"></a>浮动</h3><p><strong>「1. CSS布局的三种机制」</strong></p><blockquote><p>网页布局的核心——就是<strong>用CSS来摆放盒子</strong>。</p></blockquote><p>CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：</p><p><strong>A. 普通流（标准流）</strong></p><ul><li><p>块级元素会独占一行，从上向下顺序排列；</p></li><li><ul><li>常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table</li></ul></li><li><p>行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；</p></li><li><ul><li>常用元素：span、a、i、em等</li></ul></li></ul><p><strong>B. 浮动</strong></p><ul><li>让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。</li></ul><p><strong>C. 定位</strong></p><ul><li>将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。</li></ul><p><strong>「2. 什么是浮动」</strong>元素的浮动是指设置了浮动属性的元素会</p><ul><li>脱离标准普通流的控制,不占位置，脱标</li><li>移动到指定位置。</li></ul><h5 id="作用"><a href="#作用" class="headerlink" title="作用"></a>作用</h5><ol><li>让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。</li><li>可以实现盒子的左右对齐等等。</li><li>浮动最早是用来控制图片，实现文字环绕图片效果。</li><li>float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。</li></ol><h5 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 &#123; float: 属性值; &#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th align="left">属性值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">none</td><td align="left">元素不浮动（默认值）</td></tr><tr><td align="left">left</td><td align="left">元素向左浮动</td></tr><tr><td align="left">right</td><td align="left">元素向右浮动</td></tr></tbody></table><blockquote><p>浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。<br>**建议:**如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题</p></blockquote><p><img src="" data-lazy-src="" alt="图片"></p><p><strong>浮动(float)小结</strong></p><table><thead><tr><th align="left">特点</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left">浮</td><td align="left">加了浮动的盒子<strong>「是浮起来」</strong>的，漂浮在其他标准流盒子的上面。</td></tr><tr><td align="left">漏</td><td align="left">加了浮动的盒子<strong>「是不占位置的」</strong>，它原来的位置<strong>「漏给了标准流的盒子」</strong>。</td></tr><tr><td align="left">特</td><td align="left"><strong>「特别注意」</strong>：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙</td></tr></tbody></table><h3 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h3><p>因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。<img src="" data-lazy-src="" alt="图片"><img src="" data-lazy-src="" alt="图片"><strong>总结：</strong></p><ul><li>由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响</li><li>准确地说，并不是清除浮动，而是清除浮动后造成的影响</li></ul><p><strong>清除浮动本质</strong>清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了</p><h4 id="清除浮动的方法"><a href="#清除浮动的方法" class="headerlink" title="清除浮动的方法"></a>清除浮动的方法</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 &#123; clear: 属性值; &#125;   clear 清除  </span><br></pre></td></tr></table></figure><table><thead><tr><th align="left">属性值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">left</td><td align="left">不允许左侧有浮动元素（清除左侧浮动的影响）</td></tr><tr><td align="left">right</td><td align="left">不允许右侧有浮动元素（清除右侧浮动的影响）</td></tr><tr><td align="left">both</td><td align="left">同时清除左右两侧浮动的影响</td></tr></tbody></table><p>实际工作中,几乎只用clear: both</p><p><strong>1).额外标签法(隔墙法)</strong></p><p>是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如</p><div></div>，或则其他标签br等亦可。<p></p><ul><li>优点：通俗易懂，书写方便</li><li>缺点：添加许多无意义的标签，结构化较差。</li></ul><p><strong>2).父级添加overflow属性方法</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。</span><br></pre></td></tr></table></figure><ul><li>优点： 代码简洁</li><li>缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。</li></ul><p><strong>3).使用after伪元素清除浮动</strong>:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">.clearfix:after &#123;</span><br><span class="line">    content: &quot;&quot;;</span><br><span class="line">    display: block;</span><br><span class="line">    height: 0;</span><br><span class="line">    clear: both;</span><br><span class="line">    visibility: hidden;</span><br><span class="line">&#125;</span><br><span class="line">  </span><br><span class="line">/* IE6、7 专有 */</span><br><span class="line">.clearfix &#123;</span><br><span class="line">    *zoom: 1;</span><br><span class="line">&#125;</span><br><span class="line">    </span><br></pre></td></tr></table></figure><ul><li>优点：符合闭合浮动思想 结构语义化正确</li><li>缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。</li></ul><p><strong>4).使用双伪元素清除浮动</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">.clearfix:before,</span><br><span class="line">.clearfix:after &#123;</span><br><span class="line">    content: &quot;&quot;;</span><br><span class="line">    display: table;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.clearfix:after &#123;</span><br><span class="line">    clear: both;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.clearfix &#123;</span><br><span class="line">   *zoom: 1;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>优点： 代码更简洁</li><li>缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。</li></ul><h4 id="清除浮动总结"><a href="#清除浮动总结" class="headerlink" title="清除浮动总结"></a>清除浮动总结</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">什么时候用清除浮动呢？</span><br></pre></td></tr></table></figure><ol><li>父级没高度</li><li>子盒子浮动了</li><li>影响下面布局了，我们就应该清除浮动了。</li></ol><table><thead><tr><th align="left">清除浮动的方式</th><th align="left">优点</th><th align="left">缺点</th></tr></thead><tbody><tr><td align="left">额外标签法（隔墙法）</td><td align="left">通俗易懂，书写方便</td><td align="left">添加许多无意义的标签，结构化较差。</td></tr><tr><td align="left">父级overflow:hidden;</td><td align="left">书写简单</td><td align="left">溢出隐藏</td></tr><tr><td align="left">父级after伪元素</td><td align="left">结构语义化正确</td><td align="left">由于IE6-7不支持:after，兼容性问题</td></tr><tr><td align="left">父级双伪元素</td><td align="left">结构语义化正确</td><td align="left">由于IE6-7不支持:after，兼容性问题</td></tr></tbody></table><h3 id="CSS属性书写顺序"><a href="#CSS属性书写顺序" class="headerlink" title="CSS属性书写顺序"></a>CSS属性书写顺序</h3><p>建议遵循以下顺序：</p><ol><li>布局定位属性：display &#x2F; position &#x2F; float &#x2F; clear &#x2F; visibility &#x2F; overflow（建议 display 第一个写，毕竟关系到模式）</li><li>自身属性：width &#x2F; height &#x2F; margin &#x2F; padding &#x2F; border &#x2F; background</li><li>文本属性：color &#x2F; font &#x2F; text-decoration &#x2F; text-align &#x2F; vertical-align &#x2F; white- space &#x2F; break-word</li><li>其他属性（CSS3）：content &#x2F; cursor &#x2F; border-radius &#x2F; box-shadow &#x2F; text-shadow &#x2F; background:linear-gradient …</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">.jdc &#123;</span><br><span class="line">    display: block;</span><br><span class="line">    position: relative;</span><br><span class="line">    float: left;</span><br><span class="line">    width: 100px;</span><br><span class="line">    height: 100px;</span><br><span class="line">    margin: 0 10px;</span><br><span class="line">    padding: 20px 0;</span><br><span class="line">    font-family: Arial, &#x27;Helvetica Neue&#x27;, Helvetica, sans-serif;</span><br><span class="line">    color: #333;</span><br><span class="line">    background: rgba(0,0,0,.5);</span><br><span class="line">    -webkit-border-radius: 10px;</span><br><span class="line">    -moz-border-radius: 10px;</span><br><span class="line">    -o-border-radius: 10px;</span><br><span class="line">    -ms-border-radius: 10px;</span><br><span class="line">    border-radius: 10px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><hr><h2 id="定位-position"><a href="#定位-position" class="headerlink" title="定位(position)"></a>定位(position)</h2><p><strong>「1. 定位详解」</strong></p><p>将盒子<strong>「定」</strong>在某一个<strong>「位」</strong>置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。</p><p>所以，我们脑海应该有三种布局机制的上下顺序👇👇<br>标准流在最底层 (海底) ——- 浮动 的盒子 在 中间层 (海面) ——- 定位的盒子 在 最上层 （天空）</p><p><strong>定位</strong>是用来布局的，它有两部分组成：定位 &#x3D; 定位模式 + 边偏移在 CSS 中，通过 <code>top</code>、<code>bottom</code>、<code>left</code> 和 <code>right</code> 属性定义元素的<strong>「边偏移」</strong>：（方位名词）</p><table><thead><tr><th align="left">边偏移属性</th><th align="left">示例</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left"><code>top</code></td><td align="left"><code>top: 80px</code></td><td align="left"><strong>「顶端」</strong>偏移量，定义元素相对于其父元素<strong>「上边线的距离」</strong>。</td></tr><tr><td align="left"><code>bottom</code></td><td align="left"><code>bottom: 80px</code></td><td align="left"><strong>「底部」</strong>偏移量，定义元素相对于其父元素<strong>「下边线的距离」</strong>。</td></tr><tr><td align="left"><code>left</code></td><td align="left"><code>left: 80px</code></td><td align="left"><strong>「左侧」</strong>偏移量，定义元素相对于其父元素<strong>「左边线的距离」</strong>。</td></tr><tr><td align="left"><code>right</code></td><td align="left"><code>right: 80px</code></td><td align="left"><strong>「右侧」</strong>偏移量，定义元素相对于其父元素<strong>「右边线的距离」</strong></td></tr></tbody></table><p><img src="" data-lazy-src="" alt="图片"></p><p><strong>「2. 定位模式(position)」</strong>在 CSS 中，通过 <code>position</code> 属性定义元素的<strong>「定位模式」</strong>，语法如下：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 &#123; position: 属性值; &#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th align="left">值</th><th align="center">语义</th></tr></thead><tbody><tr><td align="left"><code>static</code></td><td align="center"><strong>「静态」</strong>定位</td></tr><tr><td align="left"><code>relative</code></td><td align="center"><strong>「相对」</strong>定位</td></tr><tr><td align="left"><code>absolute</code></td><td align="center"><strong>「绝对」</strong>定位</td></tr><tr><td align="left"><code>fixed</code></td><td align="center"><strong>「固定」</strong>定位</td></tr></tbody></table><p><strong>「3. 静态定位(static)」</strong></p><ul><li>静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。</li><li>静态定位 按照标准流特性摆放位置。它没有边偏移。</li><li>静态定位在布局时几乎不用</li></ul><p><strong>「4. 相对定位(relative)」</strong></p><ul><li>相对定位是元素相对于它原来在标准流中的位置来说的。<img src="" data-lazy-src="" alt="图片"></li><li>相对于自己原来在标准流中位置来移动的</li><li>原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。</li></ul><p><strong>「5. 绝对定位(absolute)」</strong></p><p>绝对定位是元素以带有定位的父级元素来移动位置</p><ul><li>完全脱表–完全不占位置；</li><li>父元素没有定位，则以浏览器为准定位(Document文档)。</li></ul><p><img src="" data-lazy-src="" alt="图片"></p><h4 id="父元素有定位"><a href="#父元素有定位" class="headerlink" title="父元素有定位"></a>父元素有定位</h4><p><img src="" data-lazy-src="" alt="图片"></p><h5 id="定位口诀–子绝父相"><a href="#定位口诀–子绝父相" class="headerlink" title="定位口诀–子绝父相"></a>定位口诀–子绝父相</h5><p><strong>「6. 固定定位(fixed)」</strong></p><p>固定定位是绝对定位的一种特殊形式;</p><ul><li><p>完全脱标–完全不占位置；</p></li><li><p>只认<strong>浏览器的可视窗口</strong>–浏览器可视窗口+边偏移属性来设置元素的位置</p></li><li><ul><li>跟父元素没有任何关系；单独使用</li><li>不随滚动条滚动</li></ul></li></ul><h3 id="定位-position-的扩展"><a href="#定位-position-的扩展" class="headerlink" title="定位(position)的扩展"></a>定位(position)的扩展</h3><h4 id="绝对定位的盒子居中"><a href="#绝对定位的盒子居中" class="headerlink" title="绝对定位的盒子居中"></a>绝对定位的盒子居中</h4><blockquote><p>绝对定位&#x2F;固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要向实现水平居中，可以按照下面的方法：</p></blockquote><p><img src="" data-lazy-src="" alt="图片"></p><ol><li>left : 50%:让盒子的左侧移动到父级元素的水平中心位置；</li><li>margin-left: -100px;让盒子向左移动自身宽度的一半。</li><li>同理垂直居中。</li></ol><h4 id="堆叠顺序（z-index）"><a href="#堆叠顺序（z-index）" class="headerlink" title="堆叠顺序（z-index）"></a>堆叠顺序（z-index）</h4><p>在使用<strong>「定位」</strong>布局时，可能会<strong>「出现盒子重叠的情况」</strong>。</p><p>加了定位的盒子，默认<strong>「后来者居上」</strong>， 后面的盒子会压住前面的盒子。</p><p>应用 <code>z-index</code> 层叠等级属性可以<strong>「调整盒子的堆叠顺序」</strong>。如下图所示：</p><p><img src="" data-lazy-src="" alt="图片">z-index的特性如下:</p><ol><li><strong>属性值</strong>：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；</li><li>如果属性值相同，则按照书写顺序，后来居上；</li><li>数字后面不能加单位</li><li>z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。</li></ol><h4 id="定位改变display属性"><a href="#定位改变display属性" class="headerlink" title="定位改变display属性"></a>定位改变display属性</h4><p>前面提过， display 是 显示模式， 可以通过以下方式改变显示模式:</p><ul><li>可以用inline-block 转换为行内块</li><li>可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）</li><li>绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。</li></ul><p>所以说， 一个行内的盒子，如果加了<strong>「浮动」</strong>、<strong>「固定定位」</strong>和<strong>「绝对定位」</strong>，不用转换，就可以给这个盒子直接设置宽度和高度等。</p><h4 id="定位小结"><a href="#定位小结" class="headerlink" title="定位小结"></a>定位小结</h4><table><thead><tr><th align="left">定位模式</th><th align="left">是否脱标占有位置</th><th align="left">移动位置基准</th><th align="left">模式转换（行内块）</th><th align="left">使用情况</th></tr></thead><tbody><tr><td align="left">静态static</td><td align="left">不脱标，正常模式</td><td align="left">正常模式</td><td align="left">不能</td><td align="left">几乎不用</td></tr><tr><td align="left">相对定位relative</td><td align="left">不脱标，占有位置</td><td align="left">相对自身位置移动</td><td align="left">不能</td><td align="left">基本单独使用</td></tr><tr><td align="left">绝对定位absolute</td><td align="left">完全脱标，不占有位置</td><td align="left">相对于定位父级移动位置</td><td align="left">能</td><td align="left">要和定位父级元素搭配使用</td></tr><tr><td align="left">固定定位fixed</td><td align="left">完全脱标，不占有位置</td><td align="left">相对于浏览器移动位置</td><td align="left">能</td><td align="left">单独使用，不需要父级</td></tr></tbody></table><p><strong>注意：</strong></p><ol><li><code>边偏移</code> 需要和 <code>定位模式</code> 联合使用，<code>单独使用无效</code>；</li><li><code>top</code> 和 <code>bottom</code> 不要同时使用；</li><li><code>left</code> 和 <code>right</code> 不要同时使用。</li></ol><hr><h2 id="CSS高级技巧"><a href="#CSS高级技巧" class="headerlink" title="CSS高级技巧"></a>CSS高级技巧</h2><h3 id="元素的显示与隐藏"><a href="#元素的显示与隐藏" class="headerlink" title="元素的显示与隐藏"></a>元素的显示与隐藏</h3><ul><li>**目的:**让一个元素在页面中消失或者显示出来</li><li>**场景:**类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！</li></ul><h4 id="1-1-display-显示（重点）"><a href="#1-1-display-显示（重点）" class="headerlink" title="1.1 display 显示（重点）"></a>1.1 display 显示（重点）</h4><p>display设置或检索对象是否显示或如何显示。</p><ul><li><p>display: none 隐藏对象</p></li><li><ul><li>特点：隐藏之后，不再保留位置。</li></ul></li><li><p>display: block 除了转换为块级元素之外，同时还有显示元素的意思。</p></li></ul><p><img src="" data-lazy-src="" alt="图片">实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛</p><h4 id="1-2-visibility-可见性"><a href="#1-2-visibility-可见性" class="headerlink" title="1.2 visibility 可见性"></a>1.2 visibility 可见性</h4><p>设置或检索是否显示对象</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">visibility：visible ;  对象可视</span><br><span class="line"></span><br><span class="line">visibility：hidden;    对象隐藏</span><br></pre></td></tr></table></figure><ul><li>特点：隐藏之后，继续保留原有位置。</li></ul><p><img src="" data-lazy-src="" alt="图片"></p><h4 id="1-3-overflow-溢出"><a href="#1-3-overflow-溢出" class="headerlink" title="1.3 overflow 溢出"></a>1.3 overflow 溢出</h4><p>检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。</p><table><thead><tr><th align="left">属性值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">visible</td><td align="left">不剪切内容也不添加滚动条</td></tr><tr><td align="left">hidden</td><td align="left">不显示超过对象尺寸的内容，超出的部分隐藏掉</td></tr><tr><td align="left">scroll</td><td align="left">不管超出内容否，总是显示滚动条</td></tr><tr><td align="left">auto</td><td align="left">超出自动显示滚动条，不超出不显示滚动条</td></tr></tbody></table><p><img src="" data-lazy-src="" alt="图片"><code>实际开发场景</code>：</p><ol><li>清除浮动</li><li>隐藏超出内容，隐藏掉, 不允许内容超过父盒子。</li></ol><h4 id="1-4-显示与隐藏总结"><a href="#1-4-显示与隐藏总结" class="headerlink" title="1.4 显示与隐藏总结"></a>1.4 显示与隐藏总结</h4><table><thead><tr><th align="left">属性</th><th align="left">区别</th><th align="left">用途</th></tr></thead><tbody><tr><td align="left">display</td><td align="left">隐藏对象，不保留位置</td><td align="left">配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛</td></tr><tr><td align="left">visibility</td><td align="left">隐藏对象，保留位置</td><td align="left">使用较少</td></tr><tr><td align="left">overflow</td><td align="left">只是隐藏超出大小的部分</td><td align="left">1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围</td></tr></tbody></table><h3 id="CSS用户界面样式"><a href="#CSS用户界面样式" class="headerlink" title="CSS用户界面样式"></a>CSS用户界面样式</h3><p>所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。</p><ul><li>更改用户的鼠标样式</li><li>表单轮廓等。</li><li>防止表单域拖拽</li></ul><h4 id="2-1-鼠标样式"><a href="#2-1-鼠标样式" class="headerlink" title="2.1 鼠标样式"></a>2.1 鼠标样式</h4><p>设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。</p><table><thead><tr><th align="left">属性值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">default</td><td align="left">小白 默认</td></tr><tr><td align="left">pointer</td><td align="left">小手</td></tr><tr><td align="left">move</td><td align="left">移动</td></tr><tr><td align="left">text</td><td align="left">文本</td></tr><tr><td align="left">not-allowed</td><td align="left">禁止</td></tr></tbody></table><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li style=&quot;cursor:default&quot;&gt;我是小白&lt;/li&gt;</span><br><span class="line">  &lt;li style=&quot;cursor:pointer&quot;&gt;我是小手&lt;/li&gt;</span><br><span class="line">  &lt;li style=&quot;cursor:move&quot;&gt;我是移动&lt;/li&gt;</span><br><span class="line">  &lt;li style=&quot;cursor:text&quot;&gt;我是文本&lt;/li&gt;</span><br><span class="line">  &lt;li style=&quot;cursor:not-allowed&quot;&gt;我是文本&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure><h4 id="2-2-轮廓线-outline"><a href="#2-2-轮廓线-outline" class="headerlink" title="2.2 轮廓线 outline"></a>2.2 轮廓线 outline</h4><p><img src="" data-lazy-src="" alt="图片">是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">outline : outline-color ||outline-style || outline-width </span><br></pre></td></tr></table></figure><p>但是我们都不关心可以设置多少，我们平时都是去掉的。<br>最直接的写法是 ： outline: 0; 或者 outline: none;</p><h4 id="2-3-防止拖拽文本域resize"><a href="#2-3-防止拖拽文本域resize" class="headerlink" title="2.3 防止拖拽文本域resize"></a>2.3 防止拖拽文本域resize</h4><p><img src="" data-lazy-src="" alt="图片"></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;textarea  style=&quot;resize: none;&quot;&gt;&lt;/textarea&gt;</span><br></pre></td></tr></table></figure><h4 id="2-4-用户界面样式总结"><a href="#2-4-用户界面样式总结" class="headerlink" title="2.4 用户界面样式总结"></a>2.4 用户界面样式总结</h4><table><thead><tr><th align="left">属性</th><th align="left">用途</th><th align="left">用途</th></tr></thead><tbody><tr><td align="left">鼠标样式</td><td align="left">更改鼠标样式cursor</td><td align="left">样式很多，重点记住 pointer</td></tr><tr><td align="left">轮廓线</td><td align="left">表单默认outline</td><td align="left">outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用</td></tr><tr><td align="left">防止拖拽</td><td align="left">主要针对文本域resize</td><td align="left">防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none</td></tr></tbody></table><h3 id="vertical-align-垂直对齐"><a href="#vertical-align-垂直对齐" class="headerlink" title="vertical-align 垂直对齐"></a>vertical-align 垂直对齐</h3><ul><li>有宽度的块级元素居中对齐，是margin: 0 auto;</li><li>让文字居中对齐，是 text-align: center;</li></ul><p>vertical-align 垂直对齐，它只针对于<strong>「行内元素」</strong>或者<strong>「行内块元素」</strong></p><p><img src="" data-lazy-src="" alt="图片"></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">设置或检索对象内容的垂直对其方式。</span><br><span class="line">vertical-align : baseline |top |middle |bottom </span><br></pre></td></tr></table></figure><p>注意：</p><p>vertical-align 不影响块级元素中的内容对齐，它只针对于<strong>「行内元素」</strong>或者<strong>「行内块元素」</strong>，</p><p>特别是行内块元素， 通常用来控制图片&#x2F;表单与文字的对齐。</p><h4 id="3-1-图片、表单和文字对齐"><a href="#3-1-图片、表单和文字对齐" class="headerlink" title="3.1 图片、表单和文字对齐"></a>3.1 图片、表单和文字对齐</h4><p>我们可以通过<code>vertical-align</code> 控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。</p><p><img src="" data-lazy-src="" alt="图片"></p><p><img src="" data-lazy-src="" alt="图片"></p><h4 id="3-2-去除图片底侧空白缝隙"><a href="#3-2-去除图片底侧空白缝隙" class="headerlink" title="3.2 去除图片底侧空白缝隙"></a>3.2 去除图片底侧空白缝隙</h4><p><img src="" data-lazy-src="" alt="图片"><strong>原因：</strong>图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。</p><p>就是图片底侧会有一个空白缝隙。</p><p><strong>解决方法：</strong></p><ul><li>给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。</li></ul><p><img src="" data-lazy-src="" alt="图片"></p><ul><li>给img 添加 display：block; 转换为块级元素就不会存在问题了。</li></ul><h3 id="溢出的文字省略号显示"><a href="#溢出的文字省略号显示" class="headerlink" title="溢出的文字省略号显示"></a>溢出的文字省略号显示</h3><h4 id="4-1-white-space"><a href="#4-1-white-space" class="headerlink" title="4.1 white-space"></a>4.1 white-space</h4><ul><li>white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">white-space:normal ；默认处理方式</span><br><span class="line"></span><br><span class="line">white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。</span><br></pre></td></tr></table></figure><h4 id="4-2-text-overflow-文字溢出"><a href="#4-2-text-overflow-文字溢出" class="headerlink" title="4.2 text-overflow 文字溢出"></a>4.2 text-overflow 文字溢出</h4><ul><li>设置或检索是否使用一个省略标记（…）标示对象内文本的溢出</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">text-overflow : clip ；不显示省略标记（...），而是简单的裁切 </span><br><span class="line"></span><br><span class="line">text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）</span><br></pre></td></tr></table></figure><p><strong>「注意」</strong>：</p><p>一定要首先强制一行内显示，再次和overflow属性 搭配使用</p><p><img src="" data-lazy-src="" alt="图片"></p><h4 id="4-3-总结三步曲"><a href="#4-3-总结三步曲" class="headerlink" title="4.3 总结三步曲"></a>4.3 总结三步曲</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">/*1. 先强制一行内显示文本*/</span><br><span class="line">    white-space: nowrap;</span><br><span class="line">/*2. 超出的部分隐藏*/</span><br><span class="line">    overflow: hidden;</span><br><span class="line">/*3. 文字用省略号替代超出的部分*/</span><br><span class="line">    text-overflow: ellipsis;</span><br></pre></td></tr></table></figure><h3 id="CSS精灵技术（sprite"><a href="#CSS精灵技术（sprite" class="headerlink" title="CSS精灵技术（sprite)"></a>CSS精灵技术（sprite)</h3><p>CSS精灵技术（也称CSS Sprites、CSS雪碧）。<img src="" data-lazy-src="" alt="图片"></p><ul><li>图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。</li><li>然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。</li></ul><p><strong>为什么需要精灵技术</strong>：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。</p><h4 id="5-1-精灵技术讲解"><a href="#5-1-精灵技术讲解" class="headerlink" title="5.1 精灵技术讲解"></a>5.1 精灵技术讲解</h4><p>CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。</p><p><img src="" data-lazy-src="" alt="图片">这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。</p><p>我们需要使用CSS的:</p><ul><li>background-image、</li><li>background-repeat</li><li>background-position属性进行背景定位，</li><li>其中最关键的是使用<code>background-position</code> 属性精确地定位。</li></ul><h4 id="5-2-精灵技术使用的核心总结"><a href="#5-2-精灵技术使用的核心总结" class="headerlink" title="5.2 精灵技术使用的核心总结"></a>5.2 精灵技术使用的核心总结</h4><p>首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。</p><ol><li>精确测量，每个小背景图片的大小和 位置。</li><li>给盒子指定小背景图片时， 背景定位基本都是 负值。</li></ol><h3 id="滑动门"><a href="#滑动门" class="headerlink" title="滑动门"></a>滑动门</h3><p><img src="" data-lazy-src="" alt="图片"></p><h4 id="6-1-滑动门出现的背景"><a href="#6-1-滑动门出现的背景" class="headerlink" title="6.1 滑动门出现的背景"></a>6.1 滑动门出现的背景</h4><p>制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？</p><p><img src="" data-lazy-src="" alt="图片">为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。</p><h4 id="6-2-核心技术"><a href="#6-2-核心技术" class="headerlink" title="6.2 核心技术"></a>6.2 核心技术</h4><p>核心技术就是利用<code>CSS精灵</code>（主要是背景位置）和 <code>盒子padding</code>撑开宽度, 以便能适应不同字数的导航栏。</p><p>一般的经典布局都是这样的：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;li&gt;</span><br><span class="line">  &lt;a href=&quot;#&quot;&gt;</span><br><span class="line">    &lt;span&gt;导航栏内容&lt;/span&gt;</span><br><span class="line">  &lt;/a&gt;</span><br><span class="line">&lt;/li&gt;</span><br><span class="line">* &#123;</span><br><span class="line">    padding:0;</span><br><span class="line">    margin:0;</span><br><span class="line"></span><br><span class="line">   &#125;</span><br><span class="line">    body&#123;</span><br><span class="line">      background: url(images/wx.jpg) repeat-x;</span><br><span class="line">    &#125;</span><br><span class="line">    .father &#123;</span><br><span class="line">      padding-top:20px;</span><br><span class="line">    &#125;</span><br><span class="line">    li &#123;</span><br><span class="line">      padding-left: 16px;</span><br><span class="line">      height: 33px;</span><br><span class="line">      float: left;</span><br><span class="line">      line-height: 33px;</span><br><span class="line">      margin:0  10px;</span><br><span class="line">      background: url(./images/to.png) no-repeat left ;</span><br><span class="line">    &#125;</span><br><span class="line">    a &#123;</span><br><span class="line">      padding-right: 16px;</span><br><span class="line">      height: 33px;</span><br><span class="line">      display: inline-block;</span><br><span class="line">      color:#fff;</span><br><span class="line">      background: url(./images/to.png) no-repeat right ;</span><br><span class="line">      text-decoration: none;</span><br><span class="line">    &#125;</span><br><span class="line">    li:hover,</span><br><span class="line">    li:hover a &#123;</span><br><span class="line">      background-image:url(./images/ao.png);</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure><p>总结：</p><ol><li>a 设置 背景左侧，padding撑开合适宽度。</li><li>span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。</li><li>之所以a包含span就是因为 整个导航都是可以点击的。</li></ol><h3 id="CSS-三角形"><a href="#CSS-三角形" class="headerlink" title="CSS 三角形"></a>CSS 三角形</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">div &#123;</span><br><span class="line">    width: 0; </span><br><span class="line">    height: 0;</span><br><span class="line">    line-height:0；</span><br><span class="line">    font-size: 0;</span><br><span class="line">    border-top: 10px solid red;</span><br><span class="line">    border-right: 10px solid green;</span><br><span class="line">    border-bottom: 10px solid blue;</span><br><span class="line">    border-left: 10px solid #000; </span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure><ol><li>我们用css 边框可以模拟三角效果</li><li>宽度高度为0</li><li>我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了</li><li>为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;</li></ol></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">本文作者:</span> <span class="post-copyright-info"><a href="https://www.webxc.ml">XC's Blog</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">本文链接:</span> <span class="post-copyright-info"><a href="https://www.webxc.ml/post/264246537/">https://www.webxc.ml/post/264246537/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明:</span> <span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://www.webxc.ml" target="_blank">XC's Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a></div><div class="post_share"><div class="social-share" data-image="https://npm.elemecdn.com/webxc@1.0.0/cover/css1.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://npm.elemecdn.com/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://npm.elemecdn.com/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.png" target="_blank"><img class="post-qr-code-img" src="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.png" alt="Wechat"></a><div class="post-qr-code-desc">Wechat</div></li><li class="reward-item"><a href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="https://npm.elemecdn.com/webxc@1.0.0/lxfs/alipay.jpg" alt="Alipay"></a><div class="post-qr-code-desc">Alipay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/post/60656315/"><img class="prev-cover" src="https://npm.elemecdn.com/webxc@1.0.0/cover/cover7.jpg" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇文章</div><div class="prev_info">「学习笔记」HTML基础</div></div></a></div><div class="next-post pull-right"><a href="/post/465190731/"><img class="next-cover" src="https://npm.elemecdn.com/webxc@1.0.0/cover/vuex.jpg" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇文章</div><div class="next_info">VueX-数组对象的双向数据绑定</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/post/60656315/" title="「学习笔记」HTML基础"><img class="cover" src="https://npm.elemecdn.com/webxc@1.0.0/cover/cover7.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-01-01</div><div class="title">「学习笔记」HTML基础</div></div></a></div><div><a href="/post/2847555892/" title="JavaScript基础"><img class="cover" src="https://npm.elemecdn.com/webxc@1.0.0/cover/js1.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-01-05</div><div class="title">JavaScript基础</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="avatar"></div><div class="author-info__name">XC's Blog</div><div class="author-info__description">XC's Blog 记录生活和学习文章</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">74</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">22</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">22</div></a></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://tenapi.cn/qqzlk/?qq=2848141597" target="_blank" title="QQ"><i class="iconfont icon-QQ"></i></a><a class="social-icon" href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.jpg" target="_blank" title="微信"><i class="iconfont icon-weixin"></i></a><a class="social-icon" href="https://github.com/web-xc" target="_blank" title="Github"><i class="iconfont icon-github"></i></a><a class="social-icon" href="https://space.bilibili.com/2134826455" target="_blank" title="BiliBili"><i class="iconfont icon-bilibili"></i></a><a class="social-icon" href="https://music.163.com/#/user/home?id=323682437" target="_blank" title="网易云音乐"><i class="iconfont icon-wyy"></i></a></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E3%80%8C%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E3%80%8DCSS%E5%9F%BA%E7%A1%80"><span class="toc-number">1.</span> <span class="toc-text">「学习笔记」CSS基础</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E6%9E%84%E9%80%A0%E5%9D%97"><span class="toc-number">2.</span> <span class="toc-text">CSS构造块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%95%E5%85%A5CSS%E6%A0%B7%E5%BC%8F%E8%A1%A8"><span class="toc-number">2.1.</span> <span class="toc-text">引入CSS样式表</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">3.</span> <span class="toc-text">CSS基础选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#CSS%E9%80%89%E6%8B%A9%E5%99%A8%E4%BD%9C%E7%94%A8"><span class="toc-number">3.0.1.</span> <span class="toc-text">CSS选择器作用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8-1"><span class="toc-number">3.1.</span> <span class="toc-text">CSS基础选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">3.2.</span> <span class="toc-text">CSS复合选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AE%9E%E9%99%85%E5%B7%A5%E4%BD%9C%E4%B8%AD%EF%BC%8C%E5%BE%88%E5%B0%91%E5%86%99%E5%85%A8%E5%9B%9B%E4%B8%AA%E7%8A%B6%E6%80%81%EF%BC%8C%E4%B8%80%E8%88%AC%E5%86%99%E6%B3%95%E5%A6%82%E4%B8%8B%EF%BC%9A"><span class="toc-number">3.2.0.1.</span> <span class="toc-text">实际工作中，很少写全四个状态，一般写法如下：</span></a></li></ol></li></ol><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F"><span class="toc-number">4.</span> <span class="toc-text">CSS字体样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#font%E5%AD%97%E4%BD%93"><span class="toc-number">4.1.</span> <span class="toc-text">font字体</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%95%E4%BD%8D"><span class="toc-number">4.1.1.</span> <span class="toc-text">单位</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E5%A4%96%E8%A7%82%E5%B1%9E%E6%80%A7"><span class="toc-number">4.2.</span> <span class="toc-text">CSS外观属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%8C%E9%AB%98%E6%B5%8B%E9%87%8F"><span class="toc-number">4.2.1.</span> <span class="toc-text">行高测量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%8C%E9%AB%98%E4%B8%8E%E9%AB%98%E5%BA%A6%E7%9A%84%E4%B8%89%E7%A7%8D%E5%85%B3%E7%B3%BB"><span class="toc-number">4.2.2.</span> <span class="toc-text">行高与高度的三种关系</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F-display"><span class="toc-number">5.</span> <span class="toc-text">标签显示模式(display)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F%E8%BD%AC%E6%8D%A2-display"><span class="toc-number">5.0.1.</span> <span class="toc-text">标签显示模式转换 display</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number"></span> <span class="toc-text">~、、、、、等，其中标签是最典型的块元素。</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link"><span class="toc-number">0.0.0.0.1.</span> <span class="toc-text">、、、、、等，其中标签是最典型的块元素。</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-number">0.0.0.1.</span> <span class="toc-text">块级元素的特点</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-number">0.0.0.2.</span> <span class="toc-text">行内元素的特点</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F"><span class="toc-number">0.0.0.2.1.</span> <span class="toc-text">注意</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89%E7%A7%8D%E6%A8%A1%E5%BC%8F%E6%80%BB%E7%BB%93"><span class="toc-number">0.0.1.</span> <span class="toc-text">三种模式总结</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E8%83%8C%E6%99%AF-background"><span class="toc-number">1.</span> <span class="toc-text">CSS背景(background)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%EF%BC%9A"><span class="toc-number">1.0.1.</span> <span class="toc-text">注意：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E7%AE%80%E5%86%99%EF%BC%9A"><span class="toc-number">1.0.2.</span> <span class="toc-text">背景简写：</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E5%8D%8A%E9%80%8F%E6%98%8E-opacity"><span class="toc-number">1.0.2.1.</span> <span class="toc-text">盒子半透明 opacity</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7"><span class="toc-number">2.</span> <span class="toc-text">CSS三大特性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="toc-number">3.</span> <span class="toc-text">盒子模型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B-Box-Model"><span class="toc-number">3.1.</span> <span class="toc-text">1. 盒子模型(Box Model)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E7%9B%92%E5%AD%90%E8%BE%B9%E6%A1%86-border"><span class="toc-number">3.2.</span> <span class="toc-text">2. 盒子边框(border)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%86%85%E8%BE%B9%E8%B7%9D-padding"><span class="toc-number">3.3.</span> <span class="toc-text">2. 内边距(padding)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%A4%96%E8%BE%B9%E8%B7%9D%EF%BC%88margin%EF%BC%89"><span class="toc-number">3.4.</span> <span class="toc-text">3. 外边距（margin）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6"><span class="toc-number">3.5.</span> <span class="toc-text">4.外边距合并</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#1-%E7%9B%B8%E9%82%BB%E5%9D%97%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%A4%96%E8%BE%B9%E8%B7%9D%E7%9A%84%E5%90%88%E5%B9%B6"><span class="toc-number">3.5.0.0.1.</span> <span class="toc-text">(1). 相邻块元素垂直外边距的合并</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%B5%8C%E5%A5%97%E5%9D%97%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%A4%96%E8%BE%B9%E8%B7%9D%E7%9A%84%E5%90%88%E5%B9%B6%EF%BC%88%E5%A1%8C%E9%99%B7%EF%BC%89"><span class="toc-number">3.5.1.</span> <span class="toc-text">(2). 嵌套块元素垂直外边距的合并（塌陷）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E5%B8%83%E5%B1%80%E7%A8%B3%E5%AE%9A%E6%80%A7"><span class="toc-number">3.5.2.</span> <span class="toc-text">盒子模型布局稳定性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-CSS3-%E6%96%B0%E5%A2%9E"><span class="toc-number">3.6.</span> <span class="toc-text">5. CSS3 新增</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8"><span class="toc-number">4.</span> <span class="toc-text">浮动</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8-1"><span class="toc-number">4.1.</span> <span class="toc-text">浮动</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BD%9C%E7%94%A8"><span class="toc-number">4.1.0.1.</span> <span class="toc-text">作用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95"><span class="toc-number">4.1.0.2.</span> <span class="toc-text">语法</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="toc-number">4.2.</span> <span class="toc-text">清除浮动</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">4.2.1.</span> <span class="toc-text">清除浮动的方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E6%80%BB%E7%BB%93"><span class="toc-number">4.2.2.</span> <span class="toc-text">清除浮动总结</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E5%B1%9E%E6%80%A7%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F"><span class="toc-number">4.3.</span> <span class="toc-text">CSS属性书写顺序</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D-position"><span class="toc-number">5.</span> <span class="toc-text">定位(position)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%88%B6%E5%85%83%E7%B4%A0%E6%9C%89%E5%AE%9A%E4%BD%8D"><span class="toc-number">5.0.1.</span> <span class="toc-text">父元素有定位</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D%E5%8F%A3%E8%AF%80%E2%80%93%E5%AD%90%E7%BB%9D%E7%88%B6%E7%9B%B8"><span class="toc-number">5.0.1.1.</span> <span class="toc-text">定位口诀–子绝父相</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D-position-%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-number">5.1.</span> <span class="toc-text">定位(position)的扩展</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%9B%92%E5%AD%90%E5%B1%85%E4%B8%AD"><span class="toc-number">5.1.1.</span> <span class="toc-text">绝对定位的盒子居中</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A0%86%E5%8F%A0%E9%A1%BA%E5%BA%8F%EF%BC%88z-index%EF%BC%89"><span class="toc-number">5.1.2.</span> <span class="toc-text">堆叠顺序（z-index）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D%E6%94%B9%E5%8F%98display%E5%B1%9E%E6%80%A7"><span class="toc-number">5.1.3.</span> <span class="toc-text">定位改变display属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D%E5%B0%8F%E7%BB%93"><span class="toc-number">5.1.4.</span> <span class="toc-text">定位小结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7"><span class="toc-number">6.</span> <span class="toc-text">CSS高级技巧</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E4%B8%8E%E9%9A%90%E8%97%8F"><span class="toc-number">6.1.</span> <span class="toc-text">元素的显示与隐藏</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-display-%E6%98%BE%E7%A4%BA%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-number">6.1.1.</span> <span class="toc-text">1.1 display 显示（重点）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-2-visibility-%E5%8F%AF%E8%A7%81%E6%80%A7"><span class="toc-number">6.1.2.</span> <span class="toc-text">1.2 visibility 可见性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-3-overflow-%E6%BA%A2%E5%87%BA"><span class="toc-number">6.1.3.</span> <span class="toc-text">1.3 overflow 溢出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-4-%E6%98%BE%E7%A4%BA%E4%B8%8E%E9%9A%90%E8%97%8F%E6%80%BB%E7%BB%93"><span class="toc-number">6.1.4.</span> <span class="toc-text">1.4 显示与隐藏总结</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E6%A0%B7%E5%BC%8F"><span class="toc-number">6.2.</span> <span class="toc-text">CSS用户界面样式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1-%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8F"><span class="toc-number">6.2.1.</span> <span class="toc-text">2.1 鼠标样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-2-%E8%BD%AE%E5%BB%93%E7%BA%BF-outline"><span class="toc-number">6.2.2.</span> <span class="toc-text">2.2 轮廓线 outline</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-%E9%98%B2%E6%AD%A2%E6%8B%96%E6%8B%BD%E6%96%87%E6%9C%AC%E5%9F%9Fresize"><span class="toc-number">6.2.3.</span> <span class="toc-text">2.3 防止拖拽文本域resize</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-4-%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E6%A0%B7%E5%BC%8F%E6%80%BB%E7%BB%93"><span class="toc-number">6.2.4.</span> <span class="toc-text">2.4 用户界面样式总结</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vertical-align-%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90"><span class="toc-number">6.3.</span> <span class="toc-text">vertical-align 垂直对齐</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-%E5%9B%BE%E7%89%87%E3%80%81%E8%A1%A8%E5%8D%95%E5%92%8C%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90"><span class="toc-number">6.3.1.</span> <span class="toc-text">3.1 图片、表单和文字对齐</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-%E5%8E%BB%E9%99%A4%E5%9B%BE%E7%89%87%E5%BA%95%E4%BE%A7%E7%A9%BA%E7%99%BD%E7%BC%9D%E9%9A%99"><span class="toc-number">6.3.2.</span> <span class="toc-text">3.2 去除图片底侧空白缝隙</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%BA%A2%E5%87%BA%E7%9A%84%E6%96%87%E5%AD%97%E7%9C%81%E7%95%A5%E5%8F%B7%E6%98%BE%E7%A4%BA"><span class="toc-number">6.4.</span> <span class="toc-text">溢出的文字省略号显示</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-1-white-space"><span class="toc-number">6.4.1.</span> <span class="toc-text">4.1 white-space</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-2-text-overflow-%E6%96%87%E5%AD%97%E6%BA%A2%E5%87%BA"><span class="toc-number">6.4.2.</span> <span class="toc-text">4.2 text-overflow 文字溢出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3-%E6%80%BB%E7%BB%93%E4%B8%89%E6%AD%A5%E6%9B%B2"><span class="toc-number">6.4.3.</span> <span class="toc-text">4.3 总结三步曲</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E7%B2%BE%E7%81%B5%E6%8A%80%E6%9C%AF%EF%BC%88sprite"><span class="toc-number">6.5.</span> <span class="toc-text">CSS精灵技术（sprite)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#5-1-%E7%B2%BE%E7%81%B5%E6%8A%80%E6%9C%AF%E8%AE%B2%E8%A7%A3"><span class="toc-number">6.5.1.</span> <span class="toc-text">5.1 精灵技术讲解</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-2-%E7%B2%BE%E7%81%B5%E6%8A%80%E6%9C%AF%E4%BD%BF%E7%94%A8%E7%9A%84%E6%A0%B8%E5%BF%83%E6%80%BB%E7%BB%93"><span class="toc-number">6.5.2.</span> <span class="toc-text">5.2 精灵技术使用的核心总结</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%BB%91%E5%8A%A8%E9%97%A8"><span class="toc-number">6.6.</span> <span class="toc-text">滑动门</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#6-1-%E6%BB%91%E5%8A%A8%E9%97%A8%E5%87%BA%E7%8E%B0%E7%9A%84%E8%83%8C%E6%99%AF"><span class="toc-number">6.6.1.</span> <span class="toc-text">6.1 滑动门出现的背景</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-2-%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF"><span class="toc-number">6.6.2.</span> <span class="toc-text">6.2 核心技术</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-%E4%B8%89%E8%A7%92%E5%BD%A2"><span class="toc-number">6.7.</span> <span class="toc-text">CSS 三角形</span></a></li></ol></li></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/post/us87/" title="JS进阶第二天"><img src="https://npm.elemecdn.com/webxc/cover/js1.webp" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="JS进阶第二天"></a><div class="content"><a class="title" href="/post/us87/" title="JS进阶第二天">JS进阶第二天</a><time datetime="2023-05-05T01:20:00.000Z" title="发表于 2023-05-05 01:20:00">2023-05-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/re67/" title="JS进阶第一天"><img src="https://npm.elemecdn.com/webxc/cover/js1.webp" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="JS进阶第一天"></a><div class="content"><a class="title" href="/post/re67/" title="JS进阶第一天">JS进阶第一天</a><time datetime="2023-04-26T16:30:00.000Z" title="发表于 2023-04-26 16:30:00">2023-04-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/ar34/" title="Web APIs第七天"><img src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/webapis.jpg" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="Web APIs第七天"></a><div class="content"><a class="title" href="/post/ar34/" title="Web APIs第七天">Web APIs第七天</a><time datetime="2023-04-17T20:00:00.000Z" title="发表于 2023-04-17 20:00:00">2023-04-17</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2023 By XC's Blog</div><div class="framework-info"><span></span> <a target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20235221">萌ICP备20235221号</a><span class="footer-separator">|</span><span></span> <a target="_blank" rel="noopener" href="https://icp.gov.moe/">萌ICP查询</a><div id="running-time"></div></div><script>setInterval((()=>{let e=Math.round(new Date("2021-11-21 01:35:06").getTime()/1e3),t=Math.round(((new Date).getTime()+288e5)/1e3)-e,n=new Array(0,0,0,0,0);t>=31536e3&&(n[0]=parseInt(t/31536e3),t%=31536e3),t>=86400&&(n[1]=parseInt(t/86400),t%=86400),t>=3600&&(n[2]=parseInt(t/3600),t%=3600),t>=60&&(n[3]=parseInt(t/60),t%=60),t>0&&(n[4]=t),currentTimeHtml="本站已安全运行 "+n[0]+" 年 "+n[1]+" 天 "+n[2]+" 时 "+n[3]+" 分 "+n[4]+" 秒",document.getElementById("running-time").innerHTML=currentTimeHtml}),1e3)</script></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0<span>%</span></span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight,500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i> <span>正在载入文件,请稍后</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"></div></div><hr><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="https://npm.elemecdn.com/hexo-theme-butterfly/source/js/utils.js"></script><script src="https://npm.elemecdn.com/hexo-theme-butterfly@4.4.0/source/js/main.js"></script><script src="https://npm.elemecdn.com/@fancyapps/ui/dist/fancybox.umd.js"></script><script src="https://npm.elemecdn.com/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://npm.elemecdn.com/node-snackbar/dist/snackbar.min.js"></script><script src="https://npm.elemecdn.com/hexo-theme-butterfly/source/js/search/local-search.js"></script><div class="js-pjax"><script>(()=>{const e=document.querySelectorAll("#article-container .mermaid-wrap");if(e.length){window.runMermaid=()=>{window.loadMermaid=!0;const t="dark"===document.documentElement.getAttribute("data-theme")?"dark":"default";Array.from(e).forEach(((e,n)=>{const d=e.firstElementChild,r="mermaid-"+n,m="%%{init:{ 'theme':'"+t+"'}}%%\n"+d.textContent;mermaid.mermaidAPI.render(r,m,(e=>{d.insertAdjacentHTML("afterend",e)}))}))};const t=()=>{window.loadMermaid?runMermaid():getScript("https://npm.elemecdn.com/mermaid/dist/mermaid.min.js").then(runMermaid)};window.pjax?t():document.addEventListener("DOMContentLoaded",t)}})()</script><script>(()=>{const o=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://blog2.webxc.ml/",region:"",onCommentLoaded:function(){btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))},t=()=>{"object"!=typeof twikoo?getScript("https://npm.elemecdn.com/twikoo@1.6.10/dist/twikoo.all.min.js").then(o):setTimeout(o,0)};t()})()</script></div><script data-pjax="true" defer src="https://npm.elemecdn.com/webxc@1.0.16/css/style.js"></script><script defer src="https://npm.elemecdn.com/hexo-theme-butterfly@4.4.0/source/js/search/local-search.js"></scrip><script src="https://npm.elemecdn.com/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!0,POWERMODE.mobile=!0,document.body.addEventListener("input",POWERMODE)</script><script src="https://npm.elemecdn.com/pjax@0.2.8/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax",".tk-comments-container"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(window.tocScrollFn&&window.removeEventListener("scroll",window.tocScrollFn),window.scrollCollect&&window.removeEventListener("scroll",scrollCollect),"object"==typeof preloader&&preloader.initLoading(),document.getElementById("rightside").style.cssText="opacity: ''; transform: ''",window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),"object"==typeof disqusjs&&disqusjs.destroy()})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll(),"object"==typeof preloader&&preloader.endLoading()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script data-pjax>function butterfly_swiper_injector_config(){var s=document.getElementById("recent-posts");console.log("已挂载butterfly_swiper"),s.insertAdjacentHTML("afterbegin",'<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/webapis.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-04-11</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fr67/&quot;);" href="javascript:void(0);" alt="">Web APIs第六天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-02-16</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fd38/&quot;);" href="javascript:void(0);" alt="">JavaScript 第五天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-02-07</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/7f86/&quot;);" href="javascript:void(0);" alt="">JavaScript 第四天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-12-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/6e+47/&quot;);" href="javascript:void(0);" alt="">JavaScript 第三天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover15.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-10-31</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/2db5/&quot;);" href="javascript:void(0);" alt="">移动开发-Flex布局</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover16.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-11-14</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/1c7e/&quot;);" href="javascript:void(0);" alt="">移动开发-媒体查询</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover17.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-11-17</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/7fc/&quot;);" href="javascript:void(0);" alt="">移动开发-响应式</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.11/cover/css5.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-10-16</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/d97/&quot;);" href="javascript:void(0);" alt="">CSS-2D-3D转换</a><div class="blog-slider__text">点击查看</div></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>')}for(var elist="null".split(","),cpage=location.pathname,epage="all",flag=0,i=0;i<elist.length;i++)cpage.includes(elist[i])&&flag++;("all"===epage&&0==flag||epage===cpage)&&butterfly_swiper_injector_config()</script><script defer src="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper_init.js"></script></body></html>